maybe you can help me solve something related to a hover over an image.
I am applying a transition
to an image and in the hover event I apply a transform
what happens is that my images blur when I hover over it, as if I were doing a Scale
but I am not telling it to apply it
.moveCard {
transition: 0.8s;
}
.moveCard:hover {
transform: translate(0, -10px);
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="col-6 col-md-3 mb-3">
<div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
<div class="list-card-image">
<a href="product_details.php?valueId=<?php echo $prodId ?>&idCate=1" class="text-dark">
<div class="p-3">
<img src="https://cdn.forzaitalianfootball.com/wp-content/uploads/2021/04/online_gambling_online_growth-800x504.jpg" class="img-fluid item-img w-100 mb-3 moveCard" style="width:234px;height:147px">
<h6 class="textHTitles">Nombre Card</h6>
<h7 class="textHTitles">Descripcion Card</h7>
<div class="d-flex align-items-center">
<div class="container" style="text-align:center">
<h6><a class="btn btn-link" href="product_details.php?valueId=<?php echo $prodId ?>&idCate=1">Ver info</a></h6>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
The image looks fine but after applying the transition it blurs the image and when you remove the mouse the image is also blurred.
I would appreciate any feedback.
It may be that, because you are only moving the container, and not the image. Try both at the same time:
.moveCard, .moveCard img { ...}
, or just the image.Try this style: