Home » Web Design » Rollover Thumbs Images Using CSS Mask Transitions

Rollover Thumbs Images Using CSS Mask Transitions

Great way to enhance your web design skills

The HTML Structure

<!-- Structure -->
<ul class="thumb">
<li>
<a href="#">
<div class="thumb-container">
<div class="mask-1"></div>
<img src="img/thumb.jpg">
</div></a>
</li>
</ul>

<!-- Structure -->
<ul class="thumb">
<li>
<a href="#">
<div class="thumb-container">
<div class="mask-2"></div>
<img src="img/thumb.jpg">
</div></a>
</li>
</ul>

The CSS Structure

.thumb { width:273px; height:293px; display:inline-block; }
ul.thumb li:hover .mask-1 {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

.thumb-container {
width:273px;
height:293px;
display:block;
overflow:hidden;
position:relative;
}

.mask-1 {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position:absolute;
background:url(../img/mask.png) no-repeat center;
left:0;
top:0;
width:273px;
height:293px;
z-index:999;
}

.thumb-container img {
position:absolute;
left:1px;
top:1px;
width:270px;
height:290px;
z-index:990;
}

/* MASK 2 */
ul.thumb li:hover .mask-2 {
-webkit-transform: scale(2.1);
-moz-transform: scale(2.1);
-o-transform: scale(2.1);
transform: scale(2.1);
}

.mask-2 {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position:absolute;
background:url(../img/mask2.png) no-repeat center;
left:0;
top:0;
width:273px;
height:293px;
z-index:999;
}

Rollover Demos Download Tutorial

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top