Tengo este problema que cuando lo hago con CSS me deja pero con SASS no. Quiero que el título de la imagen esté desaparecido y cuando pase el mouse por encima, aparezca. En CSS tengo un contenedor de una imagen y un span, al igual que en SASS, pero no me lo muestra.
Paso el HTML CON CSS y SASS por último.
HTML
<div class="content-img">
<div class="image">
<img src="./ASSETS/IMG/2-0-batmoon.png" alt="vampires" />
<span class="name">
<span class="txt">Luna con Murcielagos </span>
</span>
</div>
<div class="image">
<img src="./ASSETS/IMG/2-1-dragon.png" alt="dragon" />
<span class="name">
<span class="txt">Dragon Chino</span>
</span>
</div>
CSS
.content-img .image .name {
background-color: #202020;
border-radius: 15px;
color: #fff;
display: none;
min-width: 100px;
width: 150px;
}
.content-img .image:hover .name {
display: inline;
}
<div class="content-img">
<div class="image">
<img src="./ASSETS/IMG/2-0-batmoon.png" alt="vampires" />
<span class="name">
<span class="txt">Luna con Murcielagos </span>
</span>
</div>
<div class="image">
<img src="./ASSETS/IMG/2-1-dragon.png" alt="dragon" />
<span class="name">
<span class="txt">Dragon Chino</span>
</span>
</div>
SASS
.name {
background-color: #202020;
border-radius: 15px;
color: #fff;
display: none;
min-width: 100px;
width: 150px;
&:hover .name {
display: inline;
}
Probe haciendolo y me sigue fallando, no se si sera un problema de especificidad o que