DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report
  1. DZone
  2. Coding
  3. Languages
  4. CSS3 Image Hover Effects

CSS3 Image Hover Effects

Andrey Prikaznov user avatar by
Andrey Prikaznov
·
Jan. 26, 12 · Interview
Like (0)
Save
Tweet
Share
19.83K Views

Join the DZone community and get the full member experience.

Join For Free
Today I will tell you how to create different CSS3 image hover effects. I hope that you still remember our old tutorial. We used JavaScript there. Today I will try to make something similar using pure CSS3. In the resulting gallery page, we will have 9 images, each of them having its own hover effect.

Live Demo

download result


Ok, download the example files and lets start !


Step 1. HTML

First, let's prepare the main HTML markup for our demo gallery. As you can see – the resulting structure is quite easy. Here are set of DIV objects. Each of them contains one image and some virtual mask (DIV). The last element will contain two masks.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Image Hover Effects | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/gall.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Image Hover Effects</h2>
            <a href="http://www.script-tutorials.com/css3-image-hover-effects/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>

        <!-- panel with buttons -->
        <div class="photos">
            <div>
                <img src="images/pic1.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic2.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic3.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic4.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic5.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic6.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic7.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic8.jpg" />
                <div></div>
            </div>
            <div class="pair">
                <img src="images/pic9.jpg" />
                <div></div>
                <div></div>
            </div>
        </div>
    </body>
</html>

Step 2. CSS

I omit styles of layout.css. Here are nothing interesting. The most interesting – next one file (where I have prepared all necessary styles of our gallery):

css/gall.css

.photos {
    width: 945px;
    height: 400px;
    margin: 100px auto;
    position:relative;
}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 100px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 300px;
    z-index: 1;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;

    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}
.photos > div div {
    background: url(../images/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 15;

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}

.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 300px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;

    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;

    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 50%;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 150px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 300px;
}

Live Demo

download result


Conclusion

Today we have nine great onhover image effects. Please return to read our new tutorials!

 

Source: http://www.script-tutorials.com/css3-image-hover-effects/

CSS

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Fargate vs. Lambda: The Battle of the Future
  • Keep Your Application Secrets Secret
  • Microservices Testing
  • Introduction To OpenSSH

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: