Adding hover effects to your website is important since they not only improve interactivity with various elements but also provide a way to communicate more information. These effects alert users that specific elements like buttons, images, or links are interactive and clickable. Aside from usefulness, hover effects improve the beauty and style of your website by adding elegance to important elements, and this article will show you several techniques you can apply.
Session Replay for Developers
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data.
Happy debugging! Try using OpenReplay today.
With a hover effect implemented, whenever a user hovers their cursor over an element, such as an image or a button, it causes a change in appearance, such as a color change, animation, or underline. These effects give users fast feedback by pointing out that the element is interactive. Hover effects improve usefulness by directing users through the page and providing a better overall navigation experience. However, hover effects must be used with caution to ensure that they improve usefulness without being overly confusing.
It is important to note that users using mobile devices might not experience hover effects; thus, websites should provide other signs for interaction.
Creating Hover Effects for Cancel Buttons to Display Only Icons
We'll see how to make a cancel button more engaging by adding a hover effect such that when the button is hovered over, we only see a cancel icon on the button and not the cancel text and icon side by side on the button.
Showing only the icon on hover avoids disarray and provides a correct response, making it easier for users to understand the action linked to the button. This can increase ease of use and accessibility, mostly on smaller screens where space is limited.
Let's get started!
We'll use both Bootstrap and pure CSS for styles.
So, to use Bootstrap, in your index.html, add the following code:
<!-- add this in the head tag -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- add this in the body tag -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"
></script>
In your HTML file, enter the following code:
<div class="mt-5">
<button
class="d-flex text-white justify-content-between fw-2 text-uppercase cursor overflow-hidden"
>
<span class="exit-text fw-3 fs-6 text-center">Exit</span>
<span class="icon">
<i class="bi bi-x"></i>
</span>
</button>
</div>
In the above code, we have a button that contains text and an icon.
In your CSS file, enter this code:
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
button {
border: 1px solid #d35400;
background-color: #d35400;
border-radius: 5px;
margin: 0 auto;
transition: 400ms;
width: 110px;
padding: 5px 0;
}
.exit-text {
margin: auto 0;
width: 75%;
}
.icon {
margin: auto 0;
width: 35%;
font-size: smaller;
margin-top: .3px;
transform: scale(1.4);
}
.exit-text,
.icon {
display: flex;
align-items: center;
transition: 400ms;
justify-content: center;
}
.icon i {
transition: 400ms;
transform: scale(1);
}
button:hover {
border: 1px solid #e67e22;
background-color: #e67e22;
}
button:hover .exit-text {
margin-left: -100%;
}
button:hover .icon {
font-size: large;
width: 100%;
margin-top: -5px;
transform: scale(1.6);
}
At the top of the code snippet above, we import a set of icons from Bootstrap Icons for us to access the "cancel icon." The button, when hovered over, animates smoothly over 0.4 seconds and contains an "exit text" and an icon. When we hover the button, its border and background-color change to a lighter shade of orange, text shifts to the left, and the size of the icon increases.
Here is a demo:
Achieve More Interactivity with a Button Slice Effect Using :hover
In this section, we'll learn how to create a slicing effect on a button when we hover over it.
Implementing a slicing effect on hover creates a dynamic transition that grabs the user's attention and provides a response. This improves every aspect of the user experience and makes the website feel more functional and engaging.
Let's get right into it.
In your HTML, enter this code:
<div class="mt-5 text-center">
<button class="button-container text-white cursor">
<span class="fw-bold text-uppercase fs-3 d-flex justify-content-center"
>Hover Me</span
>
<span class="fw-bold text-uppercase fs-3 d-flex justify-content-center"
>Hover Me</span
>
</button>
</div>
In this HTML snippet, we have two spans of text with bold, uppercase, and large font-size inside a button.
In your CSS, enter this code:
.button-container {
border: 1px solid;
position: relative;
width: 150px;
height: 50px;
margin: 0 auto;
}
.button-container:hover span:first-child {
border: 1px solid #16a085;
transform: translateX(-3px) translateY(-3px);
}
.button-container:hover span:last-child {
border: 1px solid #16a085;
transform: translateX(3px) translateY(3px);
}
span {
border: 1px solid #16a085;
background-color: #16a085;
border-radius: 5px;
position: absolute;
inset: 3px;
align-items: center;
transition: transform 400ms;
letter-spacing: -1px;
}
span:first-child {
clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
}
span:last-child {
clip-path: polygon(59% 0, 100% 0, 100% 100%, 39% 100%);
}
This CSS code defines the styling for a button container with a slicing effect on hover. By hovering over the button, each span element moves slightly. Each of the span elements has the same border, background-color, and border-radius, and they are in an absolute position within the button. The first span element is clipped using the clip-path property and moved to the top-left, while the second span is clipped and moved to the bottom-right, resulting in giving the button a slicing effect.
Here is the result:
Reassembling Images using :hover Pseudo-class
It will be interesting to know that we can use the hover effect to join an image that is separated. We'll learn how to do that in this section.
When you use this reassembling effect, it's like putting things that are separate in their right positions when you hover over the images. It makes people interested in seeing what happens when they look at the images on a website.
In your HTML, enter this code:
<div class="border border-danger d-flex justify-content-center">
<img src="../../assets/user/bgImg.jpg" />
<img src="../../assets/img1.jpeg" />
</div>
In your CSS, enter this code:
img {
width: 40%;
cursor: pointer;
mask:
radial-gradient(circle closest-corner at right, #000 99%, transparent) 0
100%/46% 92% no-repeat,
radial-gradient(circle closest-corner at left, #000 99%, transparent) 100% 0/46%
92% no-repeat;
-webkit-mask:
radial-gradient(circle closest-corner at right, #000 99%, transparent) 0
100%/46% 92% no-repeat,
radial-gradient(circle closest-corner at left, #000 99%, transparent) 100% 0/46%
92% no-repeat;
transition: 500ms;
filter: grayscale(0.2);
}
img:hover {
mask-position:
8% 50%,
92.5% 50%;
-webkit-mask-position:
8% 50%,
92.5% 50%;
filter: grayscale(0);
}
Using the mask property creates a circular masking effect, which happens by applying two radial gradients to the right and left corners of the images. We use the gradient to reduce its appearance from black to transparent, filling about 99% of the image. We added a transition with a duration of 500ms in order to obtain a smooth animation effect when we hover over the images. We use a grayscale filter to tone down the images by 20%, which will result in a moderately faint look.
When we hover, the mask-position and -webkit-mask-position properties move the masking gradients to show the full color of the images. We use the filter property to remove the grayscale effect, which returns the images to their original color.
Here is our result:
Building Interactive Hover Panels
Here, we'll see how to create interactive hover panels with HTML and CSS. We'll go through how to use CSS transitions and pseudo-class like :hover to create panels that respond to user interaction.
With this type of hover effect, users can enjoy looking through various areas of the website by just moving their mouse. Interactive hover panels can help show key information, making it less stressful for users to find what they're looking for.
In your HTML, enter this code:
<section class="border border-danger justify-content-center d-flex">
<div class="panel">
<div class="p-2 panel-content">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>
</div>
<div class="panel ms-4">
<div class="p-2 panel-content">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet consectetu adipisicingr.</p>
</div>
</div>
</section>
In your CSS, enter this code:
.panel {
background-color: #34495e;
color: white;
position: relative;
border-right: 5px solid gray;
border-bottom: 5px solid gray;
width: 150px;
height: 160px;
overflow: hidden;
cursor: pointer;
font-size: 14px;
transform: translate(-8%, -5%);
transition: transform 400ms;
}
.panel:hover {
transform: translate(0, 0);
border-right: none;
border-bottom: none;
}
From the above code, when we hover over the panel, we'll notice a smooth transition effect that occurs on the panel, which makes it shift towards the x-axis by -8% and towards the y-axis by -5%, and this will also cause its right and bottom borders to fall.
Here is a demo:
Merging Image and Border with the :hover Pseudo-class
Once in a while, you may add a border to an image and also want to make it stylish by adding a hover effect in such a manner that the image and border are separate, but when you hover over the image, the border finds its position on the image.
We'll definitely create a striking effect that grabs people's attention when we bring together the image and its border using the :hover pseudo-class.
In your HTML file, add this code:
<div class="mt-5 border border-danger d-flex justify-content-evenly">
<img src="../../assets/user/bgImg.jpg" />
<img src="../../assets/img1.jpeg" />
</div>
In your CSS file, add this code:
img:first-child {
background:
linear-gradient(#9b59b6 10px, #0000 0 calc(100% - 10px), #9b59b6 0)
calc(3 * 20px) calc(3 * 20px),
linear-gradient(90deg, #9b59b6 10px, #0000 0 calc(100% - 10px), #9b59b6 0)
calc(3 * 20px) calc(3 * 20px);
background-size: calc(100% - calc(3 * 20px)) calc(100% - calc(3 * 20px));
background-repeat: no-repeat;
filter: grayscale(0.5);
padding: calc(10px + 8px) calc(10px + 8px + 20px) calc(10px + 8px + 20px)
calc(5px + 10px);
width: 30%;
transition: 600ms;
cursor: pointer;
}
img:last-child {
background:
linear-gradient(#c0392b 10px, #0000 0 calc(100% - 10px), #c0392b 0)
calc(3 * 20px) calc(3 * 20px),
linear-gradient(90deg, #c0392b 10px, #0000 0 calc(100% - 10px), #c0392b 0)
calc(3 * 20px) calc(3 * 20px);
background-size: calc(100% - calc(3 * 20px)) calc(100% - calc(3 * 20px));
background-repeat: no-repeat;
filter: grayscale(0.5);
padding: calc(10px + 8px) calc(10px + 8px + 20px) calc(10px + 8px + 20px)
calc(5px + 10px);
width: 30%;
transition: 600ms;
cursor: pointer;
}
img:hover {
border-radius: 5px;
filter: grayscale(0);
background-size: calc(100% - 25px) calc(100% - 25px);
background-position: 0px 0px;
}
What the code above does is customize the border colors for each image, making them less bright. Using the calc() function, we calculated the padding, background-size, and background-position accurately. When we hover, we remove the filter to bring back the original colors of the image and its border. Also, we reset the background-position to its default state, making sure the border aligns well with its own image.
Here is a demo:
Creating a Smooth Team Glide Hover Effect
Here, we'll create a gliding effect that will happen on a group of team images that are stacked together, so that, when we hover over them, they will shift smoothly to the bottom-right.
If you're looking to make your team section on your website more interesting, this hover effect is your best choice. When a user hovers over team images on a website, they smoothly slide into a position, which makes the website look interesting. It's also an effective approach to focusing on your team members and making them stand out on the page.
Let's go!
Add this code to your HTML file:
<section class="border border-danger">
<h2 class="text-center fs-4 heading-text">Team Glide Hover Effect</h2>
<main class="d-flex justify-content-center mt-4">
<div class="team-div">
<img src="../../assets/images1.jpg" alt="" />
</div>
<div class="team-div">
<img src="../../assets/images1.jpg" alt="" />
</div>
<div class="team-div">
<img src="../../assets/images1.jpg" alt="" />
</div>
<div class="team-div">
<img src="../../assets/images1.jpg" alt="" />
</div>
<div class="team-div">
<img src="../../assets/images1.jpg" alt="" />
</div>
<div class="team-div">
<img src="../../assets/images1.jpg" alt="" />
</div>
</main>
</section>
Add this code to your CSS file:
.heading-text {
color: #c0392b;
}
main {
width: 90%;
margin: 0 auto;
}
.team-div {
transition: ease 400ms;
}
.team-div img {
border: 5px solid #34495e;
border-radius: 50%;
width: 100%;
height: 70%;
cursor: pointer;
}
.team-div:hover {
transform: translate(-10px, 30px);
}
From the code above, when we hover over the collection of images, each image shifts smoothly horizontally by -10px and vertically by 30px.
Here is a demo:
Creating an Edge 3D Hover Effect
So, what we'll create in this section is like making different sides of an image or plane shift towards different positions in a 3D appearance when you hover over them.
The edge 3D hover effect is important to use on a website as it makes images appear to be in 3D when they are barely hovered over.
Add the following code to your HTML:
<section class="image-container text-center">
<div class="imgPosition"></div>
<div class="imgPosition"></div>
<div class="imgPosition"></div>
<div class="imgPosition"></div>
<div class="imgPosition"></div>
<div class="imgPosition"></div>
<img src="../../assets/img1.jpeg" alt="" />
</section>
Add the following code to your CSS:
.image-container {
margin: 0 auto;
aspect-ratio: 16/9;
display: block;
position: relative;
--d-rotate: 25deg;
}
img {
width: 50%;
--X: 0deg;
--Y: 0deg;
transition: transform 400ms;
transform: perspective(600px) rotateY(var(--Y)) rotateX(var(--X));
}
.imgPosition {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 2);
z-index: 1;
display: inline-block;
}
.imgPosition:nth-child(1) {
top: 0;
left: 0;
}
.imgPosition:nth-child(1):hover ~ img {
--X: var(--d-rotate);
--Y: calc(var(--d-rotate) * -1);
}
.imgPosition:nth-child(2) {
top: 0;
left: calc(100% / 3);
}
.imgPosition:nth-child(2):hover ~ img {
--X: var(--d-rotate);
--Y: 0deg;
}
.imgPosition:nth-child(3) {
top: 0;
right: 0;
}
.imgPosition:nth-child(3):hover ~ img {
--X: var(--d-rotate);
--Y: var(--d-rotate);
}
.imgPosition:nth-child(4) {
bottom: 0;
left: 0;
}
.imgPosition:nth-child(4):hover ~ img {
--X: calc(var(--d-rotate) * -1);
--Y: calc(var(--d-rotate) * -1);
}
.imgPosition:nth-child(5) {
bottom: 0;
left: calc(100% / 3);
}
.imgPosition:nth-child(5):hover ~ img {
--X: calc(var(--d-rotate) * -1);
--Y: 0deg;
}
.imgPosition:nth-child(6) {
bottom: 0;
right: 0;
}
.imgPosition:nth-child(6):hover ~ img {
--X: calc(var(--d-rotate) * -1);
--Y: var(--d-rotate);
}
Here, we have an image with six different image positions representing the image sides, like top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right. On hover, we specify what angle these sides will smoothly shift to.
Here is a demo:
Conclusion
It's really fun what the :hover pseudo-class can do as we have seen seven interesting hover effects that we can implement on our website to make it more engaging for users. We've learned how to hover over images or cards, and they shift smoothly to a specified position or angle. There's more that can be done with the :hover pseudo-class, and I hope you get to explore it.
Top comments (0)