css - por - mostrar texto al pasar mouse sobre imagen
Texto sobre la imagen mouseover? (3)
Aquí hay una manera de hacer esto usando css
HTML
<div class="imageWrapper">
<img src="http://lorempixel.com/300/300/" alt="" />
<a href="http://google.com" class="cornerLink">Link</a>
</div>
CSS
.imageWrapper {
position: relative;
width: 300px;
height: 300px;
}
.imageWrapper img {
display: block;
}
.imageWrapper .cornerLink {
opacity: 0;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding: 2px 0px;
color: #ffffff;
background: #000000;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.imageWrapper:hover .cornerLink {
opacity: 0.8;
}
O si solo lo quieres en la esquina inferior izquierda:
Intento que aparezca una pequeña caja en el lado inferior izquierdo de una imagen cuando el mouse se mueve sobre ella. Dentro del cuadro habrá un enlace a una página diferente.
Here es algo similar a lo que quiero, pero la caja es más pequeña y no está conectada al borde de la imagen.
Lo intenté todo y no puedo encontrar una respuesta. Y no quiero usar la información sobre herramientas, y menos el hecho de que no tengo ningún conocimiento de javascript. Realmente quiero que esto sea CSS.
También las imágenes con las que trato de trabajar se pueden encontrar aquí mismo.
Uso :hover::before pseudooclass
.round-pic2:hover::before{
content: ''text'';
position: relative;
top: 60px;
left: 50px;
width: 30px;
height: 20px;
text-align: center;
display: inline-block;
}
Esto está usando el :hover desplazamiento en CSS3.
HTML:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
Demostración HERE .
En su lugar, esta es una forma de lograr el mismo resultado utilizando jquery:
HTML:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS:
#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
código jquery:
$(''.hover'').mouseover(function() {
$(''.text'').css("visibility","visible");
});
$(''.hover'').mouseout(function() {
$(''.text'').css("visibility","hidden");
});
Puedes poner el código jquery donde quieras, en el cuerpo de la página HTML, luego debes incluir la biblioteca jquery en el encabezado así:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Puedes ver la demostración HERE .
Cuando quiera usarlo en su sitio web, simplemente cambie el valor <img src /> y puede agregar varias imágenes y subtítulos, simplemente copie el formato que usé: inserte la imagen con class="hover" yp con class="text"