This tutorial will teach us how to create better user engagement. As developers started to make their websites using HTML and CSS, creating a 3D image hover effect using HTML and CSS became an important aspect. In many situations, developers must create a smooth and beautiful 3D image effect for better user engagement.
To create such immersive 3D hover effects we use transition and transform properties of the CSS in the code. These hover effects help web developers engage more users on their websites. It also helps to improve the visual appeal of the website which helps in increasing brand perception among users. As we are only using HTML and CSS and not JavaScript, it helps to decrease overhead association with Javascript, leading to faster loading and smooth interactions. Today’s blog post will teach us how to create cool 3D hover effects using HTML and CSS.
Create 3D Cool Image Hover Effects
Here we will learn how to create two different 3D hover effects that can be used on your websites to make them more appealing to the users. These two 3D hover effects are
- 3D image pop out
- 3D image flip
3D Image Pop Out
The 3D pop-out effect is a visual effect used in web design to give elements mainly images the 3D appearance to seem as though they are popping out of the screen. This hover effect can be achieved using some properties of the CSS in the code which are “translateZ“, “perspective“, “transform” and”box-shadow“. It helps to create a dynamic interactive effect for the user and hovering over the website image.
For this post, we will be using this particular image :
https://drive.google.com/file/d/19EFjlaq1dV26IKljNT4dlCnUrZWGuHAA/view?usp=drive_link
SYNTAX
The general syntax makes any container have a particular image and makes it pop out that is
.image-container{
perspective: 1000px;
}
.image:hover{
transform: translateZ(150px);
box-shadow: 10px 20px 30px rgba(0, 0,0, 0.6);
}
EXAMPLE
In this example, we will see how to build the 3D hover effect of image pop-out using HTML and CSS. Here first we made an HTML file layout and we gave the title name 3D Image Hover Effect. In the body of the HTML, we make two div boxes. The first one is the parent div having class attribute image-container and the second div is the child div having class attribute image. Now apply the style in the head of the HTML so we can use CSS in the HTML. Now define the height and width of the image container to 500px and give it a margin of 100px from up and bottom also making left and right margin auto.
Also, make all elements have 0px in margin and padding at starting and set the minimum height to 100%. Set the background color to your liking. Then set the height and width of the image container to 500px and give it a margin of 100px for top/bottom and auto for left/right. Then set the perspective to 1000px, which helps in creating a 3D effect in the image transition. Put the image URL in the background of the image class div and set the width and height to 100% of the image container. The background-size should be covered. Make transition for all to 0.6s.
Now to give it a 3D effect, set the image:hover has properties is a transform in which will be set to the quantity you want to set here 150px and box shadow to the 10px 20px 30px rgba(0, 0,0, 0.6) which will set the shadow when hovering over the image at the right and bottom of the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Image Hover Effect</title>
<style>
* {
margin: 0px;
padding: 0px;
}
html,
body {
min-height: 100%;
}
body {
background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
}
.image-container {
width: 500px;
height: 500px;
margin: 100px auto;
perspective: 1000px;
}
.image{
width: 100%;
height: 100%;
background: url(" "); /* Here we will put the link of our image*/
background-size: cover;
transition: all 0.6s;
}
.image:hover{
transform: translateZ(150px);
box-shadow: 10px 20px 30px rgba(0, 0,0, 0.6);
}
</style>
</head>
<body>
<div class="image-container">
<div class="image">
</div>
</div>
</body>
</html>
In this output, the image seems to pop out of the screen when hovered.
3D Image Flipping
3D Image Flipping is a visual effect used to increase the user experience and interactiveness with the website. This image or element rotates along the 3D axis to reveal another or back side of the element. This method is mainly used to show extra information like a description of the image on the other side of the image. It adds a dynamic aspect to the image making it more interactive. To make an image 3D flip we will use the “rotateY“, “Backface-visibility: hidden“, “transform” and “transition” properties of the CSS.
SYNTAX
There is no general syntax for this type of hover effect but we will see the syntax that was used in the below example
.image, .description{
backface-visibility: hidden;
}
.image-container:hover .description {
transform: rotateY(0deg);
}
.image-container:hover .image {
transform: rotateY(180deg);
}
EXAMPLE
Now we will how this works using an example. In this example, we will make an image 3D flip in the Y direction and add a description at its backface. To do this first create image-container and image-named div classes in HTML like the 3D pop-out example we have discussed above and give them the same CSS.
Now add a description class name div in the image container alongside the image div. Set the image container position as relative and the image and description div position as absolute. Both divs should have the top and left position set to 0 and width and height to 100%. Now to hide their backface so that it won’t be visible when fipped both backface-visibility is set to hidden. The transition of the transform property will be 0.6sec.
Now put the image in image class div and set the z-index to 2. Now give a description div the display flex with center position using flex properties with color and background as your liking. The z-index would be 3. Then to rate it set the transform property to transform: rotateY(-180deg). This will make the description rotate 180 degrees when it is not required or not hover it
Now to create a hover effect we will add rotateY(0deg) to the .image-container: hover .description and rotateY(180deg) to .image-container: hover .image. This will make the image rotate to 180 deg in the Y direction when hovered and make the description visible when on screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Image Hover Effect</title>
<style>
* {
margin: 0px;
padding: 0px;
}
html,
body {
min-height: 100%;
}
body {
background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
}
.image-container {
width: 500px;
height: 500px;
margin: 100px auto;
perspective: 1000px;
position: relative;
}
.image,.description {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
transition: transform 0.6s;
}
.image{
background: url(" "); /* Here we will put the link of our image*/
background-size: cover;
z-index: 2;
}
.description{
display: flex;
align-items: center;
justify-content: center;
color: white;
background-color: rgba(0,0,0,0.6);
transform: rotateY(-180deg);
z-index: 3;
}
.image-container:hover .description{
transform: rotateY(0deg);
}
.image-container:hover .image{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="image-container">
<div class="image">
</div>
<div class="description">decsription here...</div> <-- Here we will put the description of image -->
</div>
</body>
</html>
In this, the output will be that the image will be rotated 180 degrees and the description will shown.
Now we have how to create cool 3D Hover Effects like 3D image pop out and 3d image flipping using only HTML and CSS.