Implementar hover para dar movimiento a una imagen en CSS
Publicado por Dino07 (1 intervención) el 11/11/2020 01:06:19
Buenas noches, lo que pasa es que tengo una estructura en html en la que deseo que al pasar el mouse sobre una imagen que se encuentra dentro de un <div class="inner">, la imagen cambie de tamaño, esta acción la estoy planteando con la clase hover de css.
Mi código html es:
Y mi código css es:
Los resultados que obtengo es que al pasar el mouse sobre la imagen no funciona la transición y el problema que me aparece dentro del código css es que al escribir el .inner: hover, los dos puntos y el hover se me resaltan como si existiese algún error, quiero saber en qué estoy fallando en este fragmento de código para que me aparezca este error y no se ejecute correctamente la transición. Gracias, quedo al pendiente.
Mi código html es:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section>
<div class="container" id="tarjetas">
<div class="row" id="todoslosproductostitulo" >
<font color="Green" face="Century Gothic,arial">
<h2 class="text-left"> <b>Todos los productos</b></h2> </font>
</div>
<div class="row justifity-content-center" id="todoslosproductos" >
<div class="col-md-4" >
<div class="card shadow" style="width: 20rem">
<div class="inner">
<img class="card-img-top" src="../Imgs/morita.png" alt="Card image cap" >
</div>
<div class="card-body text-center">
<h5 class="card-title bg-success text-light" ><b>Bumper Top</b></h5>
<p class="card-text text-dark">
kjsdbcnjkxn sdkjcn wdjknc jkdnsc
</p>
<a href="#" class="btn btn-outline-success">Ver más</a>
</div>
</div>
</div>
</div>
</div>
</section>
Y mi código css es:
1
2
3
4
5
6
7
8
9
10
11
12
13
.inner{
overflow: hidden;}.inner img{
transition: all 1.5s ease;
}.inner:hover img{
transform: scale(1.5);
}Los resultados que obtengo es que al pasar el mouse sobre la imagen no funciona la transición y el problema que me aparece dentro del código css es que al escribir el .inner: hover, los dos puntos y el hover se me resaltan como si existiese algún error, quiero saber en qué estoy fallando en este fragmento de código para que me aparezca este error y no se ejecute correctamente la transición. Gracias, quedo al pendiente.
Valora esta pregunta
0
