Bootstrap es un marco CSS popular ampliamente utilizado por los desarrolladores frontend para crear una interfaz de usuario interactiva para aplicaciones web. Bootstrap es ampliamente utilizado debido a su simplicidad y facilidad de uso. Bootstrap permite múltiples utilidades para hacer que las imágenes sean interactivas. Una de estas utilidades puede ser cambiar el color de la imagen cuando se pasa el cursor por encima. Pasar el cursor es básicamente mover el cursor sobre la imagen. El fragmento de código a continuación muestra cómo agregar un cursor negro a una imagen usando bootstrap.
Primer enfoque: en este método, la clase de superposición de contenido especifica las propiedades requeridas de la imagen mientras el mouse pasa sobre ella. La propiedad de fondo en la clase de superposición de contenido especifica la opacidad de la imagen cuando el usuario se desplaza sobre ella. La clase de detalles de contenido especifica el conjunto de propiedades que se utilizan para el contenido que se muestra en la parte superior de la imagen cuando se pasa el mouse sobre ella.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- importing bootstrap cdn-->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<style>
/*setting the properties for container
which contains the image */
.container {
margin-top: 5px;
}
/*setting the properties for title*/
.title {
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
/*setting the properties of
content within the image*/
.content {
position: relative;
width: 90%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
/* rgb(0,0,0) indicates black and
the fourth parameter is the opacity */
.content .content-overlay {
/*setting 0.8 to 1 will turn the overlay opaque*/
background: rgba(0, 0, 0, 0.8);
position: absolute;
height: 99%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
/*transition time and effect*/
-webkit-transition: all 0.4s ease-in-out 0s;
/*transition time and effect*/
-moz-transition: all 0.4s ease-in-out 0s;
/*transition time and effect*/
transition: all 0.4s ease-in-out 0s;
}
/* setting hover properties */
.content:hover .content-overlay {
opacity: 1;
}
.content-image {
width: 100%;
}
/*setting image properties*/
img {
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*transition time and effect*/
-webkit-transition: all 0.3s ease-in-out 0s;
/*transition time and effect*/
-moz-transition: all 0.3s ease-in-out 0s;
/*transition time and effect*/
transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3 {
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p {
color: #fff;
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="content-overlay"></div>
<img class="content-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" height="300px">
<div class="content-details">
<h3 class="content-title">
GeeksforGeeks
</h3>
<p class="content-text">
Hover out to view image
</p>
</div>
</div>
</div>
</body>
</html>
Producción:
- Antes de pasar el mouse:
- Después de pasar el mouse:
Enfoque alternativo: el segundo enfoque también se ocupa del efecto de desplazamiento, pero aquí la opacidad del desplazamiento se establece en 1, lo que significa que la imagen subyacente se oculta por completo. La clase de superposición contiene el conjunto de especificaciones para la imagen cuando se pasa el cursor sobre ella. El color de fondo se establece en negro. También se establecen el tiempo de transición y la naturaleza.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!--helps in scaling the web page
according to the device screen size-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.main-container {
display: flex;
flex-direction: column;
position: relative;
justify-content: center;
align-items: center;
width: 600px;
}
/*image class sets the properties of the
image used*/
.image {
display: block;
width: 100%;
height: auto;
}
/*overlay class sets the properties
of the overlay image*/
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
/*the transition time between the
actual image to overlay*/
transition: 0.3s ease;
/*ensures black hover on the image*/
background-color: black;
}
/*hovering property is set*/
.inner-container:hover .overlay {
opacity: 1;
}
/*properties for the text on the overlay image*/
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="main-container">
<h2>
Adding black color to image
using the overlay class
</h2>
<p>Hover over the image to see the effect.</p>
<div class="inner-container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png">
<div class="overlay">
<div class="text">
Hover out to view image
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
- Antes de pasar el mouse:
- Después de pasar el mouse:
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA