Mostrar subtítulos en vuelo estacionario imagen usando CSS

En este artículo vamos a mostrar los subtítulos en vuelo estacionario imagen usando CSS . Es una técnica que mejora las interfaces de usuario y hace que su diseño de sitios web más profesional.

nuevas tendencias de diseño Todos los días están saliendo. La mayoría de ellas están construidas utilizando sólo CSS puro y sin JavaScript. El uso de CSS con prudencia y la piratería a cabo utilizando la sintaxis, podemos construir cosas brillante que mejora la experiencia del usuario.

Tomemos un ejemplo del texto de las imágenes. pies de fotos son ampliamente utilizados para contar usuario sobre qué imagen . También ayuda si la imagen no se carga, por lo que los usuarios pueden leer subtítulos y van a llegar a saber lo que todo se trata de la imagen. Pero nosotros no los necesitamos cada vez. Podemos ocultarla hasta que el usuario se cierne la imagen, por lo que no ocupan espacio en la pantalla y fuera miradas de contenido limpio.

Vamos a escribir el código en primer lugar, y luego vamos a class por el código.

En primer lugar, vamos a definir el margen de beneficio

Código – HTML

<div class="box">
<img src="image.png" alt="My Image">
<p class="caption">A beautiful image</p>
</div>

Un simple div envoltorio break class nuestros elementos de imagen y de subtítulos. En su interior tenemos una imagen y un párrafo con for subtítulo.

Ahora , el tiempo class un poco de magia de CSS.

Código – CSS

div {
position: relative;
}
div img {
display: block;
width: 350px;
margin: auto;
}
p.caption {
position: relative;
opacity: 0;
transition: opacity .3s;
}
div img:hover + p.caption {
opacity: 1;
}

Primero cambiamos la posición de div de relativa , porque queremos estilo de nuestros elementos secundarios relativos a los padres. A continuación, nos dirigimos a los img y asignar algunas propiedades a la misma. El bloque de visualización se asegurará de que nuestras imágenes no se representan en línea. A continuación, aplicamos margen propiedad abreviada para asignar automático margen. Esto centrará nuestro elemento de imagen.

El siguiente párrafo con nuestra, nos dan la posición relativa, por lo que los elementos abajo que no se mantienen en movimiento. Nosotros también dan opacidad propiedad a 0 para hacer que el elemento transparente, y aplicar la propiedad de transición con valor opacidad .3s . Esto dará una transición suave dentro 0,3 segundo for opacidad.

class, seleccionamos la etiqueta img y aplicamos : hover pseudo class y el objetivo p.caption usando selector de elemento hermano + , que selecciona los elementos más próximos al mismo. En esto simplemente cambiamos el valor de opacidad al 1 . Ahora cada vez que Pase el ratón sobre la imagen, es hermano, que es el párrafo opacidad epígrafe pasará a 1 , y será visible. Esto le dará a la página web de un sentido de iteraction y mejorar la experiencia del usuario.

Aquí es una demo,

DEMO

HTML con CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Hover Image DEMO</title>
<style id="jsbin-css">
body {
text-align: center;
}
div {
position: relative;
}
div img {
display: block;
width: 350px;
height: auto;
margin: 0 auto;
}
p.caption {
position: relative;
opacity: 0;
text-align: center;
transition: opacity .3s;
color: #f56;
}
div img:hover + p {
opacity: 1;
}
</style>
</head>
<body>
<h1>Hover your mouse over image</h1>
<div class="block">
<img src="https://cloud.google.com/blog/big-data/2016/12/images/148114735559140/image-classification-1.png" alt="">
<p class="caption">Sunflower in the garden</p>
<p>An example to show the demo of hovering mouse over the image.</p>
</div>
</body>
</html>

salida

Show captions on image hover using CSS - 4


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *