3D Image View

on

 

3D IMAGE VIEW

Hy Guys, today we are going to create a 3D image when you hover over the image. It makes your website more interactive. It shows the image title after hovering.

Here the simple HTML & CSS is used so it will be more easier to create.


Image Link Click Here!

Font Family Monterrat is used:
@import url(http://fonts.googleapis.com/css?family=Montserrat);

Here is the index.html code

<!DOCTYPE html>
<head>
<title>3D Image View</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Container -->
<div class="content">
<!-- Image -->
<a href="https://www.instagram.com/codedesignerworld">
<span style="color: #F8CE3D;font-family: Arial;font-size:16px;">CodeDesignerWorld</span>
</a>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS File style.css Code

@import url(http://fonts.googleapis.com/css?family=Montserrat);

* {margin: 0px; padding: 0;}

.content {
    width: 400px; 
    height: 300px; 
    margin: 10px auto;
    perspective: 1000px;
}
.content a {
    display: block; 
    width: 125%; 
    height: 110%;  
    background: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
        url("https://www.wallpapertip.com/wmimgs/3-34211_new-hd-wallpaper-full-hd.jpg");
    margin-left:   -50px;
    margin-top: 50px;
    background-size: 0, cover;
    transform-style: preserve-3d;
    transition: all 0.5s;
}
.content:hover a {
    transform: rotateX(90deg); 
    transform-origin: bottom;
}
.content a:after {
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; height: 30px;
    background: inherit; 
    background-size: cover, cover;
    background-position: top;
    transform: rotateX(90deg); 
    transform-origin: bottom;
}
.content a span { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%;
    font: bold 10px/36px Montserrat; 
    text-align: center; 
    color: #fff !important;
    transform: rotateX(-89.99deg); 
    transform-origin: top;
    z-index: 1;
}
.content a:before {
    content: ''; 
    position: absolute; 
    top: 0; left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s; 
    opacity: 0.15;
    transform: rotateX(95deg) translateZ(-180px) scale(0.75);
    transform-origin: bottom;
}
.content:hover a:before {
    opacity: 1;
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    transform: rotateX(0) translateZ(-60px) scale(0.85);
}

Code is Also Available on Github Click Here!


Hope You Liked this Post!


Comments

Post a Comment