Feb 28, 2018   |   Por    |    CSS

5 efectos hover css3 que puedes usar en tus proyectos

Con la llegada de CSS3 al mundo web muchas cosas cambiaron.

Aquellos que llevamos algunos años en este oficio podemos recordar lo dificil que era diseñar de manera estándar para que tu web se viera al menos aceptable en cada navegador, lo bueno es que esos tiempos ya son historia, CSS3 llego para revolucionar, son múltiples los detalles que podemos trabajar con esta potente herramienta, entre ellos se encuentra el efecto hover, que además de dar un excelente aspecto a nuestra web, aportará ese toque de dinamismo necesario para estos tiempos, así que para aquellas personas que están iniciándose en este hermoso oficio les dejo 5 efectos hover css3 que pueden usar en cualquiera de sus proyectos.

Puedes ver la demostración aquí.

O si deseas al final del artículo puedes descargar el código.

Lo primero que tenemos que tomar en cuenta es que necesitamos un contenedor, para ello vamos a usar los siguientes estilos:
.bg-black{
   background: #222026;
}

.contenido{
   width: 80%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 60px 30px;
   box-sizing: border-box;
}

 

Efecto Hover Zoom

El  html quedaría así:

     <div class="content-general bg-black">
		<div class="contenido">
			<!-- Inicio de listado uno -->
			<div class="listado-uno">
				<a href="#">
					<img src="imagenes/foto1.jpg" alt="foto-uno">
					<h2>Donec pede justo</h2>
				</a>
				<a href="#">
					<img src="imagenes/foto2.jpg" alt="foto-dos">
					<h2>Quisque rutrum</h2>
				</a>
				<a href="#">
					<img src="imagenes/foto3.jpg" alt="foto-tres">
					<h2>Etiam rhoncus</h2>
				</a>
			</div>
			<!-- Fin de listado uno -->
		</div>
     </div>

El css quedaría así:

/* ------------------------------------------------------------------ */
/*  Listado uno
/* ------------------------------------------------------------------ */
.listado-uno{
   position: relative;
}

.listado-uno:after{
   content: "";
   display: block;
   clear: both;
}

.listado-uno a{
   width: 31.33333333333333%;
   height: 300px;
   margin: 1%;
   float: left;
   overflow: hidden;
   position: relative;
}

.listado-uno a:after{
   content: '';
   background: rgba(255,141,20,0.58);
   background: -moz-linear-gradient(45deg, rgba(255,141,20,0.58) 0%, rgba(128,0,171,0.58) 100%);
   background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,141,20,0.58)), color-stop(100%, rgba(128,0,171,0.58)));
   background: -webkit-linear-gradient(45deg, rgba(255,141,20,0.58) 0%, rgba(128,0,171,0.58) 100%);
   background: -o-linear-gradient(45deg, rgba(255,141,20,0.58) 0%, rgba(128,0,171,0.58) 100%);
   background: -ms-linear-gradient(45deg, rgba(255,141,20,0.58) 0%, rgba(128,0,171,0.58) 100%);
   background: linear-gradient(45deg, rgba(255,141,20,0.58) 0%, rgba(128,0,171,0.58) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8d14', endColorstr='#8000ab', GradientType=1 );
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.listado-uno a:before{
  content: '';
  border: #fff solid 1px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
  transition: all 0.3s linear;
  opacity: 0;
}

.listado-uno a:hover:before{
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.listado-uno a img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all .5s;
   -moz-transition: all .5s;
   -webkit-transition: all .5s;
   transform: scale(1,1);
   -moz-transform: scale(1,1);
   -webkit-transform: scale(1,1);
}

.listado-uno a:hover > img {
   transform: scale(1.3,1.3);
   -moz-transform: scale(1.3,1.3);
   -webkit-transform: scale(1.3,1.3);      
}

.listado-uno h2{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 90%;
   margin: 0;
   text-align: center;
   font-family: 'Pacifico', cursive;
   color: #fff;
}

 

Efecto Hover Zoom Rotate

El  html quedaría así:

<div class="content-general">
		<div class="contenido">
			<!-- Inicio de listado dos -->
			<div class="listado-dos">
				<a href="#">
					<img src="imagenes/love1.jpg" alt="love-uno">
					<h2>Donec pede justo</h2>
				</a>
				<a href="#">
					<img src="imagenes/love2.jpg" alt="love-dos">
					<h2>Quisque rutrum</h2>
				</a>
				<a href="#">
					<img src="imagenes/love3.jpg" alt="love-tres">
					<h2>Etiam rhoncus</h2>
				</a>
			</div>
			<!-- Fin de listado dos -->
		</div>
     </div>

El css quedaría así:

/* ------------------------------------------------------------------ */
/*  Listado dos
/* ------------------------------------------------------------------ */

.listado-dos{
   position: relative;
}

.listado-dos:after{
   content: "";
   display: block;
   clear: both;
}

.listado-dos a{
   width: 31.33333333333333%;
   height: 300px;
   margin: 1%;
   float: left;
   overflow: hidden;
   position: relative;
}

.listado-dos a:after{
   content: '';
   background: rgba(0,145,255,0.49);
   background: -moz-linear-gradient(45deg, rgba(0,145,255,0.49) 0%, rgba(255,0,132,0.53) 100%);
   background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,145,255,0.49)), color-stop(100%, rgba(255,0,132,0.53)));
   background: -webkit-linear-gradient(45deg, rgba(0,145,255,0.49) 0%, rgba(255,0,132,0.53) 100%);
   background: -o-linear-gradient(45deg, rgba(0,145,255,0.49) 0%, rgba(255,0,132,0.53) 100%);
   background: -ms-linear-gradient(45deg, rgba(0,145,255,0.49) 0%, rgba(255,0,132,0.53) 100%);
   background: linear-gradient(45deg, rgba(0,145,255,0.49) 0%, rgba(255,0,132,0.53) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0091ff', endColorstr='#ff0084', GradientType=1 );
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.listado-dos a:before{
  content: '';
  border: #fff solid 1px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 120;
  transition: all 0.3s linear;
  opacity: 0;
  transform: rotate(45deg);
}

.listado-dos a:hover:before{
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.listado-dos a img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all .5s;
   -moz-transition: all .5s;
   -webkit-transition: all .5s;
   transform: scale(1,1);
   -moz-transform: scale(1,1);
   -webkit-transform: scale(1,1);
}

.listado-dos a:hover > img {
   transform: rotate(15deg) scale(1.6,1.6);
   -moz-transform: rotate(15deg) scale(1.6,1.6);
   -webkit-transform: rotate(15deg) scale(1.6,1.6);   
}

.listado-dos h2{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 90%;
   margin: 0;
   text-align: center;
   font-family: 'Amatic SC', cursive;
   font-size: 36px;
   font-weight: normal;
   color: #fff;
}

 

Efecto Hover Zoom Rotate en Escala de Grises

El  html quedaría así:

<div class="content-general bg-black">
		<div class="contenido">
			<!-- Inicio de listado tres -->
			<div class="listado-tres">
				<a href="#">
					<div>
						<img src="imagenes/music1.jpg" alt="music-uno">
						<h2>Donec pede justo</h2>
					</div>
				</a>
				<a href="#">
				<div>
					<img src="imagenes/music2.jpg" alt="music-dos">
					<h2>Quisque rutrum</h2>
				</div>
			    </a>
			    <a href="#">
				<div>
					<img src="imagenes/music3.jpg" alt="music-tres">
					<h2>Etiam rhoncus</h2>
				</div>
			    </a>
			</div>
			<!-- Fin de listado tres -->
		</div>
	</div>

El css quedaría así:

/* ------------------------------------------------------------------ */
/*  Listado tres
/* ------------------------------------------------------------------ */

.listado-tres{
   position: relative;
}

.listado-tres:after{
   content: "";
   display: block;
   clear: both;
}

.listado-tres a{
   width: 31.33333333333333%;
   height: 300px;
   margin: 1%;
   float: left;
   position: relative;
}

.listado-tres a div{
   overflow: hidden;
   width: 100%;
   height: 300px;
}

.listado-tres a div:after{
   content: '';
   background: rgba(18,18,18,0.49);
   background: -moz-linear-gradient(45deg, rgba(18,18,18,0.49) 0%, rgba(179,0,95,0.53) 100%);
   background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(18,18,18,0.49)), color-stop(100%, rgba(179,0,95,0.53)));
   background: -webkit-linear-gradient(45deg, rgba(18,18,18,0.49) 0%, rgba(179,0,95,0.53) 100%);
   background: -o-linear-gradient(45deg, rgba(18,18,18,0.49) 0%, rgba(179,0,95,0.53) 100%);
   background: -ms-linear-gradient(45deg, rgba(18,18,18,0.49) 0%, rgba(179,0,95,0.53) 100%);
   background: linear-gradient(45deg, rgba(18,18,18,0.49) 0%, rgba(179,0,95,0.53) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#121212', endColorstr='#b3005f', GradientType=1 );
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.listado-tres a:before{
   content: '';
   border: 0px solid #fff;
   -webkit-box-shadow: inset 0 0 0 15px #fff;
   -moz-box-shadow: inset 0 0 0 15px #fff;
   box-shadow: inset 0 0 0 15px #fff;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 120;
   transition: all 0.3s linear;
   opacity: .2;
}

.listado-tres a:hover:before{
   top: -15px;
   left: -15px;
   opacity: 1;
}

.listado-tres a img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all .5s;
   -moz-transition: all .5s;
   -webkit-transition: all .5s;
   transform: scale(1,1);
   -moz-transform: scale(1,1);
   -webkit-transform: scale(1,1);
   filter: grayscale(100%);
}

.listado-tres a:hover img{
   filter: grayscale(0%);
   transform: rotate(-15deg) scale(1.6,1.6);
   -moz-transform: rotate(-15deg) scale(1.6,1.6);
   -webkit-transform: rotate(-15deg) scale(1.6,1.6);  
}

.listado-tres h2{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 90%;
   margin: 0;
   text-align: center;
   font-family: 'Shrikhand', cursive;
   font-size: 22px;
   font-weight: normal;
   color: #fff;
}

 

Efecto Hover Slide

El  html quedaría así:

<div class="content-general">
		<div class="contenido">
			<!-- Inicio de listado cuatro -->
			<div class="listado-cuatro">
				<a href="#">
					<img src="imagenes/matrimonio1.jpg" alt="matrimonio-uno">
					<h2>Donec pede justo</h2>
				</a>
				<a href="#">
					<img src="imagenes/matrimonio2.jpg" alt="matrimonio-dos">
					<h2>Quisque rutrum</h2>
				</a>
				<a href="#">
					<img src="imagenes/matrimonio3.jpg" alt="matrimonio-tres">
					<h2>Etiam rhoncus</h2>
				</a>
			</div>
			<!-- Fin de listado cuatro -->
		</div>
     </div>

El css quedaría así:

/* ------------------------------------------------------------------ */
/*  Listado Cuatro
/* ------------------------------------------------------------------ */

.listado-cuatro{
   position: relative;
}

.listado-cuatro:after{
   content: "";
   display: block;
   clear: both;
}

.listado-cuatro a{
   width: 31.33333333333333%;
   height: 300px;
   margin: 1%;
   float: left;
   overflow: hidden;
   position: relative;
}

.listado-cuatro a:after{
   content: '';
   background: rgba(255,255,255,0.73);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.listado-cuatro a:before{
   content: '';
   background: #f57575;
   width: 100%;
   height: 100%;
   position: absolute;
   bottom: -300px;
   left: 0;
   transition: all 0.2s linear;
   opacity: 1;
   z-index: 2;
}

.listado-cuatro a:hover:before{
   width: 100%;
   height: 100%;
   bottom: 0;
   left: 0;
   opacity: 1;
}

.listado-cuatro a img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all .5s;
   -moz-transition: all .5s;
   -webkit-transition: all .5s;
}

.listado-cuatro h2{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 90%;
   margin: 0;
   text-align: center;
   font-family: 'Kristi', cursive;
   font-size: 42px;
   font-weight: normal;
   color: #f57575;
   transition: all 0.3s linear;
   z-index: 3;
}

.listado-cuatro h2:before{
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   transform: translate(-50%, 0);
   transition: all 0.3s linear;
   width: 20%;
   height: 1px;
   background: #f57575;
}

.listado-cuatro a:hover h2{
   color: #fff;
}

.listado-cuatro a:hover h2:before{
    background: #fff;
}

 

Efecto Hover Blur

El  html quedaría así:

<div class="content-general bg-black">
		<div class="contenido">
			<!-- Inicio de listado cinco -->
			<div class="listado-cinco">
				<a href="#">
					<img src="imagenes/arquitectura1.jpg" alt="arquitectura-uno">
					<span class="svg icon-svg-uno"></span>
					<div class="titulo-cinco">
						<h2>Donec pede justo</h2>
						<h3>Lorem ipsum dolor</h3>
					</div>
				</a>
				<a href="#">
					<img src="imagenes/arquitectura2.jpg" alt="arquitectura-dos">
					<span class="svg icon-svg-uno"></span>
					<div class="titulo-cinco">
						<h2>Quisque rutrum</h2>
						<h3>Lorem ipsum dolor</h3>
					</div>
				</a>
				<a href="#">
					<img src="imagenes/arquitectura3.jpg" alt="arquitectura-tres">
					<span class="svg icon-svg-uno"></span>
					<div class="titulo-cinco">
						<h2>Etiam rhoncus</h2>
						<h3>Lorem ipsum dolor</h3>
					</div>
				</a>
			</div>
			<!-- Fin de listado cuatro -->
		</div>
     </div>

El css quedaría así:

/* ------------------------------------------------------------------ */
/*  Listado Cinco
/* ------------------------------------------------------------------ */

.listado-cinco{
   position: relative;
}

.listado-cinco:after{
   content: "";
   display: block;
   clear: both;
}

.listado-cinco a{
   width: 31.33333333333333%;
   height: 300px;
   margin: 1%;
   float: left;
   overflow: hidden;
   position: relative;
}

.listado-cinco a:after{
   content: '';
   background: rgba(255,255,255,0.6);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.listado-cinco a img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all .5s;
   -moz-transition: all .5s;
   -webkit-transition: all .5s;
}

.listado-cinco a:hover img{
   filter: grayscale(0%);
   transform: scale(1.6,1.6);
   -moz-transform: scale(1.6,1.6);
   -webkit-transform: scale(1.6,1.6);
   -webkit-filter: blur(4px);
   filter: blur(4px);  
}

.titulo-cinco{
   position: absolute;
   bottom: -300px;
   left: 0;
   width: 100%;
   z-index: 3;
   background: #394d96;
   padding-top: 10px;
   padding-bottom: 10px;
   transition: all 0.5s ease;
}

.listado-cinco h2{
   margin: 0;
   text-align: center;
   font-family: 'Playfair Display', serif;
   font-size: 16px;
   font-weight: normal;
   color: #fff;
}

.listado-cinco h3{
   margin: 0;
   text-align: center;
   font-family: 'georgia';
   font-style: italic;
   font-size: 12px;
   font-weight: normal;
   color: #fff;
   margin-top: 5px;
}

.listado-cinco a:hover div.titulo-cinco{
   position: absolute;
   bottom: 0px;
   left: 0;
   width: 100%;
   z-index: 3;
   background: #394d96;
   padding-top: 10px;
   padding-bottom: 10px;
}


.svg::before{
   content: '';
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 50px;
   height: 50px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 50px 50px;
}

.icon-svg-uno{
   border-bottom: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: block;
   width: 50px;
   height: 50px;
   margin: 0 auto;
   margin-bottom: 15px;
   transition: all 0.5s ease;
   z-index: 3;
}

.icon-svg-uno::before{
   background-image: url("../imagenes/plus.svg");
   transition: all 0.3s linear;
}

.listado-cinco a:hover span.icon-svg-uno{
   position: absolute;
   top: 30%;
   left: 50%;
   transform: translate(-50%, -30%);
   width: 100%;
   z-index: 3;
   padding-top: 10px;
   padding-bottom: 10px;
   -webkit-filter: blur(4px);
   filter: blur(4px);  
}

 

Espero te haya gustado, como te comente en la parte superior del artículo puedes descargar el código aquí:

Descargar código fuente

Esta publicación ha sido leída 100 veces!

Deja un comentario

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