how to make a certain hover effect?

[Dopy]

I'm honestly not sure how to go about asking this, but i'm looking to make something along these lines.
[img_thumb]http://i.imgur.com/Ey9xIcr.png[/img_thumb]

I got the base HTML and css done (very sloppy), which you can view here: [url]http://www.visualcollision.com[/url]

While we're at it if you'd wish to throw in some tips/changes in regards to cleaning up the HTML and CSS, go right ahead, i'm very much inexperienced when it comes to this and I used a free template to get started (though it's completely changed by now, only unused parts of the css remain).

[P1raten]

[QUOTE=sopie;40518113]I'm honestly not sure how to go about asking this, but i'm looking to make something along these lines.
[img_thumb]http://i.imgur.com/Ey9xIcr.png[/img_thumb]

I got the base HTML and css done (very sloppy), which you can view here: [url]http://www.visualcollision.com[/url]

While we're at it if you'd wish to throw in some tips/changes in regards to cleaning up the HTML and CSS, go right ahead, i'm very much inexperienced when it comes to this and I used a free template to get started (though it's completely changed by now, only unused parts of the css remain).[/QUOTE]
Post your code to [URL="http://jsfiddle.net"]JsFiddle[/URL].

You're probably looking for something along the lines of this:

$('#box').hover(function() {
    $(this).css('opacity', 0.5);
}, function() {
    $(this).css('opacity', 1);
});

[CBastard]

So when you hover the mouse over the #box element it puts Visit profile over the top of it?

That's going to stop anyone from being able to click the links below or highlight and copy text off it.

[Dopy]

[QUOTE=CBastard;40518385]So when you hover the mouse over the #box element it puts Visit profile over the top of it?

That's going to stop anyone from being able to click the links below or highlight and copy text off it.[/QUOTE]
The buttons would move to the actual portfolio, and the text doesn't really need to be copied.

[editline]3rd May 2013[/editline]

[QUOTE=P1raten;40518246]Post your code to [URL="http://jsfiddle.net"]JsFiddle[/URL].

You're probably looking for something along the lines of this:

$('#box').hover(function() {
    $(this).css('opacity', 0.5);
}, function() {
    $(this).css('opacity', 1);
});

[/QUOTE]
[url]http://jsfiddle.net/jM3Lk/[/url]

[CBastard]

Add the following to the header:
[HTML]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/main.js"></script>
[/HTML]

Add this as the last item in the #box element and set the href.
[HTML]
<a id="overlay" href="#">
Visit Profile
</a>
[/HTML]

Add this to the end of your CSS:

#box{
	position: relative;
}
a#overlay{
	display: block;
	border: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	font-size: 48px;
	text-align: center;
	padding-top: 140px;
	opacity: 0;
}

Create a file called main.js and put in the root of the site with the following code.

$(document).ready(function() {

	$("#box").hover(
	  function () {
		//Mouse enter
		$('#overlay').stop().animate({
			opacity: 0.8
		});
	  },
	  function () {
		//Mouse leave
		$('#overlay').stop().animate({
			opacity: 0
		});
	  }
	);
});

Look at [url]http://api.jquery.com/animate/[/url] for tweaking the animation.

[Dopy]

[QUOTE=CBastard;40519132]Add the following to the header:
[HTML]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/main.js"></script>
[/HTML]

Add this as the last item in the #box element and set the href.
[HTML]
<a id="overlay" href="#">
Visit Profile
</a>
[/HTML]

Add this to the end of your CSS:

#box{
	position: relative;
}
a#overlay{
	display: block;
	border: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	font-size: 48px;
	text-align: center;
	padding-top: 140px;
	opacity: 0;
}

Create a file called main.js and put in the root of the site with the following code.

$(document).ready(function() {

	$("#box").hover(
	  function () {
		//Mouse enter
		$('#overlay').stop().animate({
			opacity: 0.8
		});
	  },
	  function () {
		//Mouse leave
		$('#overlay').stop().animate({
			opacity: 0
		});
	  }
	);
});

Look at [url]http://api.jquery.com/animate/[/url] for tweaking the animation.[/QUOTE]
Thank you! It's working perfect!

[buhbang]

why don't you just do this with 100% css3

[Dopy]

[QUOTE=jung3o;40519488]why don't you just do this with 100% css3[/QUOTE]

If you can tell me how to replace it with CSS3, i'd be more happy to know that.

[Coment]

Mix opacity of divs with transitions.
It'd look like this:

#box{
	position: relative;
       opacity:1; //or display:none, whatever floats your boat.
       transition: all 0.2s ease-in-out;
       -webkit-transition: all 0.2s ease-in-out; /** Chrome & Safari **/
       -moz-transition: all 0.2s ease-in-out; /** Firefox **/
       -o-transition: all 0.2s ease-in-out; /** Opera **/
}
a#overlay{
	display: block;
	border: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	font-size: 48px;
	text-align: center;
	padding-top: 140px;
       opacity:0;
       transition: all 0.2s ease-in-out;
       -webkit-transition: all 0.2s ease-in-out; /** Chrome & Safari **/
       -moz-transition: all 0.2s ease-in-out; /** Firefox **/
       -o-transition: all 0.2s ease-in-out; /** Opera **/
}

#box:hover{opacity:0.8;
       transition: all 0.2s ease-in-out;
       -webkit-transition: all 0.2s ease-in-out; /** Chrome & Safari **/
       -moz-transition: all 0.2s ease-in-out; /** Firefox **/
       -o-transition: all 0.2s ease-in-out; /** Opera **/
}
#box:hover a#overlay{opacity:1;
       transition: all 0.2s ease-in-out;
       -webkit-transition: all 0.2s ease-in-out; /** Chrome & Safari **/
       -moz-transition: all 0.2s ease-in-out; /** Firefox **/
       -o-transition: all 0.2s ease-in-out; /** Opera **/
}

(Yes, it's needed to copy&paste it everywhere. Trust me, personal experiences.)
[URL="jsfiddle.net/RmECT/1/"]Jsfiddle with a random image[/URL].

[buhbang]

[QUOTE=sopie;40519540]If you can tell me how to replace it with CSS3, i'd be more happy to know that.[/QUOTE]

I was i about to but i ended up going somewhere. My bad. Try out the code above

[CBastard]

Looking at your current code, you need to learn about 'classes' as a opposed to just 'id's. An id should only be used once in your HTML. A class can be used multiple times to apply the same CSS to multiple elements.

Instead of your main1.js, main2.js etc, you should only need one JS or CSS solution, you do not need to repeat things, same goes for all the repeated CSS.

[HTML]
<div class="box">
<div class="profilepic"><img border="0" src="/images/sean.png"></a></div>
<div class="profilecontentheader">Sean Gorgon</div>
<div class="profilecontenttitle">Digital Artist</br>
<img border="0" src="/images/divideblue.png"></a></div>
<div class="profilecontentprefix">Name<br>
Birthday<br>
Location<br>
Email<br>
Website<br>
hobbies</br>
</div>
[/HTML]

.box{
	margin-top: 40px;
	height: relative; 
	background: #e8e8e8;
	position: relative; 
	overflow: hidden;
	width: 580px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.5);
}

...etc for all styles you have repeated.

Also, sort out the indenting on your CSS and HTML, it's hard to work with.

The following code will work for multiple .box elements. You only need one copy of this.

$(document).ready(function() {
	$(".box").hover(
	  function () {
		//Mouse enter
		$(this).children('.overlay').stop().animate({
			opacity: 0.8
		});
	  },
	  function () {
		//Mouse leave
		$(this).children('.overlay').stop().animate({
			opacity: 0
		});
	  }
	);
});

Edit: Here, did it for you [url]http://jsfiddle.net/gNxH7/2/[/url]

[Dopy]

[QUOTE=CBastard;40520833]Looking at your current code, you need to learn about 'classes' as a opposed to just 'id's. An id should only be used once in your HTML. A class can be used multiple times to apply the same CSS to multiple elements.

Instead of your main1.js, main2.js etc, you should only need one JS or CSS solution, you do not need to repeat things, same goes for all the repeated CSS.

[HTML]
<div class="box">
<div class="profilepic"><img border="0" src="/images/sean.png"></a></div>
<div class="profilecontentheader">Sean Gorgon</div>
<div class="profilecontenttitle">Digital Artist</br>
<img border="0" src="/images/divideblue.png"></a></div>
<div class="profilecontentprefix">Name<br>
Birthday<br>
Location<br>
Email<br>
Website<br>
hobbies</br>
</div>
[/HTML]

.box{
	margin-top: 40px;
	height: relative; 
	background: #e8e8e8;
	position: relative; 
	overflow: hidden;
	width: 580px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.5);
}

...etc for all styles you have repeated.

Also, sort out the indenting on your CSS and HTML, it's hard to work with.

The following code will work for multiple .box elements. You only need one copy of this.

$(document).ready(function() {
	$(".box").hover(
	  function () {
		//Mouse enter
		$(this).children('.overlay').stop().animate({
			opacity: 0.8
		});
	  },
	  function () {
		//Mouse leave
		$(this).children('.overlay').stop().animate({
			opacity: 0
		});
	  }
	);
});

Edit: Here, did it for you [url]http://jsfiddle.net/gNxH7/2/[/url][/QUOTE]
Thanks man, I really appreciate it.

[marcopixel]

-snip- wrong thread