To apply a hover effect to image tiles so that they appear clickable, you need to ensure that your CSS selectors are targeting the correct elements. Additionally, since you want the image to indicate it’s clickable, changing the background color might not be sufficient. You might consider using opacity, scaling, or adding a border effect. You can also add the mouse:
Additional Suggestions:
- Cursor Change: Changing the cursor to a pointer on hover can also indicate that the image is clickable.css
a.slide-image { cursor: pointer; }
A background change alone may not be visible since the image would hide the background. The following CSS appears to work:
img.attachment-no.scaling.size-no.scaling:hover {
opacity: 0.5;
}
Not the best effect on its own, but it demonstrates an opacity change on hover is visible. Better would be to reduce the opacity of all elements by default; then on hover increase opacity. You can also include what Ali suggests: border, scaling, cursor, etc. changes. Note that with a lower default opacity, a background color should at least be partly visible.
Thread Starter
pgdev
(@pgdev)
Thankyou @alisamtia and @bcworkz. Both of the solutions worked for me. Can you please also suggest how can I make the round border of the image glow up with diff color on hover ? Is it possible ? Thanks.
Here is the code you can use to make a glow on hover on an image in elementor:
a.slide-image {
display: block;
width: 200px; /* Adjust size as needed / height: 200px; / Adjust size as needed */
border-radius: 50%;
transition: box-shadow 0.3s ease-in-out;
}
a.slide-image:hover {
animation: glow 1.5s infinite alternate;
}
@keyframes glow {
0% {box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.7); /* Red glow color / }
25% { box-shadow: 0 0 20px 10px rgba(0, 255, 0, 0.7); / Green glow color / }
50% { box-shadow: 0 0 20px 10px rgba(0, 0, 255, 0.7); / Blue glow color / }
75% { box-shadow: 0 0 20px 10px rgba(255, 255, 0, 0.7); / Yellow glow color / } 100% { box-shadow: 0 0 20px 10px rgba(255, 0, 255, 0.7); / Magenta glow color */
}
}
