Estoy tratando de conseguir que aparezca un pequeño cuadro en la parte inferior izquierda de una imagen cuando el ratón se mueve sobre ella. Dentro de la caja habrá un enlace a una página diferente.
El sitio web Here es algo similar a lo que quiero, pero la caja debe ser más pequeña y no estar conectada al borde de la imagen.
I'he intentado todo y no puede' encontrar una respuesta. Y no'quiero usar tooltip, por no hablar de que no tengo ningún conocimiento de javascript. Realmente quiero que esto sea CSS.
También las imágenes que I'm tratando de trabajar con se puede encontrar aquí.
Para ello se utiliza el pseudoelemento :hover
de 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;
}
Demo [AQUÍ][1].
Esto en cambio es una forma de lograr el mismo resultado usando 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 body de la página HTML, luego tienes que incluir la librería jquery en el head así:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Puedes ver la demo [AQUÍ][2].
Cuando quieras usarlo en tu web, sólo tienes que cambiar el valor <img src />
y podrás añadir múltiples imágenes y pies de foto, sólo tienes que copiar el formato que he utilizado: insertar imagen con class="hover"y p con
class="text"`.
Esta es 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;
}
[Demo][1]
O si sólo lo quieres en la esquina inferior izquierda:
[Demo][2]