If you have already come across Dribbble , you certainly have noticed the hover effect on the popular shots . The image blanks out , and all you can see are the comments put up by the dribbblers along with the post title and the date. Quite subtle , so we decided to recreate this effect .
The idea is to set the text matter's opacity to 0 and on hover to 1 .But it takes much more than this to get this perfect effect . Clever element posistioning , and a little bit of math ( tiny little bit ) .
THE MARKUP
<div class="blah">
<img alt="Main" src="http://cl.ly/VvpM/ren.jpg" />
<aside>
<h1><strong>Dribbble Shot</strong></h1>
<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</p>
<h7>Monovalent</h7>
</aside>
</div>
CSS
.blah{
display: :block;
margin:0 auto;
margin-left:150px;
margin-top:100px;
float:left;
max-width:500px;
border: 9px solid #fafafa;
height:350px;
background-color:#fafafa;
border-radius:5px;
box-shadow: 0 1px 0.5px #b1b1b1;
}
aside{
vertical-align: baseline;
position:absolute;
opacity:0;
margin:0 ;
padding:10px;
z-index:3;
max-width:100%;
width: 380px;
height: 280px;
float:left;
transition: all 0.2s ease-in-out;
}
aside:hover{
transform:all 0.2s ease-in-out;
opacity: 1;
background-color: #fafafa;
}
h7,p,strong{
background-color:transparent;
margin: 40px;
margin-top:50px;
}
h1{
background-color:transparent;
font-family:'HelveticaNeue';
font-weight: 1000;
color:#363636;
}
h7{
position:relative;
color:#969696;
}
p{
color:#313131;
}
img{
float:left;
transition: all 0.2s ease-in-out;
}
img:hover{
opacity:0.2;
}Now since the image content has to lie on top of the image , we add a positive z-index to it , and not negative or I guess we could also use the :after property to achieve this.
A bit about position:absolute
This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.
Take a look at the final demo .
Facebook
Twitter
Google+