Hover with Border-color showing and Image opacity in 0.3
Hello, please how can I achieve this in CSS:
I am trying to hover on the image with the Border-color showing with no opacity, but the image retains its opacity of 0.3.
Problem: when I hover on the Image, the Image and the Border-color is affected by the 0.3 opacity.
Goal: I would like to only make the Image (without the borders) have the opacity.
CODEPEN: https://codepen.io/kiz1/pen/NWeNMzE
7 Replies
you can wrap your image in a div set the border on it and then keep the lower opacity on img hover
https://codepen.io/MannixMD/pen/zYyqajE
@Mannix sorry bro, the code pen is disorganized. and the code seem not to be working.
what do you mean?? i put all the css at the bottom and only the first image is working didn't bother with the rest
The Hovering over the image didn't work
and the borders also didn't show
You could give this method a shot? https://codepen.io/deerCabin/pen/YzdPvwz
@Kizzz