CODEWITHSUNDEEP
csshover
user2516117
user2516117

Reputation: 129

Enlarge image on hover with css and ease

I use some pretty straightforward css to show a larger image on hover. This is the HTML structure:

<div class="Enlarge">
<img src="small.jpg" />
<span><img src="large.jpg" /></span>
</div>

And here's the CSS:

.Enlarge {
position:relative;
}    
.Enlarge span {
position:absolute;
left: -9999px;
}
.Enlarge span img {
margin-bottom:5px;
}    
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}    
div.Enlarge:hover span{ 
top: 110px;
left: 0px;
z-index: 999;
width:500px;
height:300px;
padding: 10px;
background:#eae9d4;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
font-family: 'Droid Sans', sans-serif;
font-size:12px;
line-height:18px;
text-align: center;
color: #495a62;
padding-bottom:20px;
}

However, I would like to add an ease in/out effect to the larger image. I couldn't work that out. If I apply the transition to the , the image will slide in from the left side. This is not what I want. If I apply the effect to the image, it won't work.

Here's the example: Example

Thanks in advance for your input!

Upvotes: 0

Views: 5349

Answers (1)

Michael
Michael

Reputation: 7092

Using visibility and opacity you can achieve a fade effect.

JSFiddle Demo

Add these styles:

.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}

div.Enlarge:hover span {
    visibility: visible;
    opacity: 1;
    /* rest of your styles below */

Upvotes: 2

Related Questions