Si has llegado hasta aquí buscando animaciones de css ejemplos, estás en el lugar indicado. Desde BeaSpaces ofrezco diseño de páginas web y aunque tiendo a utilizar el constructor de Divi para la gran parte de mis páginas web, muchas veces los clientes me piden diseños o efectos bonitos que me gustaría compartir con vosotros.
Estos efectos son muy bonitos y dan un estilo mucho más dinámico a la hora de hacer páginas web, te permitirá poner la guinda en el pastel y podrás marcar una pequeña diferencia con el resto de las páginas web.
Así que, ¡Toma nota! Te voy a DESVELAR mis efectos favoritos.
Aunque muchas de mis guías son para novatos, esta guía os tocará tener conocimientos básicos de CSS.
Tabla de contenidos
Línea debajo del menú css animado
Pues eso, que, si quieres un efecto hover al pasar el puntero por encima del menú, te traigo un efecto super bonito, ten en cuenta que estas IDs son para Divi, no obstante, siempre puedes buscar los id y las class de tu tema con el inspect:
Código CSS
/*cositas para personalizar el menú*/
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: «»;
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: «»;
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #f7d584; /*** COLOR DE LA LINEA INFERIOR ***/
height: 3px; /*** GROSOR DE LA LINEA INFERIOR ***/
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s; /*esto evita que se vea como un pegote y se vea como algo suave*/
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}
Texto flotante sobre imagen CSS
¿Quién no tiene una web con fotografías pero eso de que se quede estático no te gusta? Te traigo un bri-consejo: pon un texto que aparezca al poner el puntero encima de las fotografías.
En BeaSpaces encuentras soluciones de todo tipo, incluso si tienes problemas con solucionar contenido mixto WordPress.
Para este código lo vas a poder tomar nota desde 0, lo hice a través del típico editor de texto de toda la vida .
Código HTML
<div class=»con-tooltip top»>
<p><img src=»ejemplo.png» alt=»Smiley face» width=»220px» height=»auto» style=»box-shadow: 2px 2px 10px grey; padding: 5px; background-color: white;» /> </p>
<div class=»tooltip «>
<p><strong>Me gustan los ejemplos</strong>
<strong>Tipo de transación:</strong> aparece
<strong>Status:</strong>latente
</p>
</div>
</div>
Código CSS
.con-tooltip {
left: 10%;
}
h1{
margin-bottom: 7%;
}
/*tooltip Box*/
.con-tooltip {
position: relative;
border-radius: 9px;
padding: 0 20px;
margin: 10px;
display: inline-block;
transition: all 0.3s ease-in-out;
cursor: default;
}
/*tooltip */
.tooltip {
visibility: hidden;
z-index: 1;
opacity: .40;
width: 100%;
padding: 0px 20px;
background: #ffffff;
color: #000000;
position: absolute;
top:-130%;
left: -3%;
border-radius: 9px;
transform: translateY(9px);
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}
/* tooltip after*/
.tooltip::after {
content: » «;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12.5px 0 12.5px;
border-color: white transparent black transparent;
position: absolute;
left: 40%;
}
.con-tooltip:hover .tooltip{
visibility: visible;
transform: translateY(-10px);
opacity: 1;
transition: .3s linear;
animation: odsoky 0s ease-in-out infinite alternate;
}
@keyframes odsoky {
0%{
transform: translateY(6px);
}
100%{
transform: translateY(1px);
}
}
/*left*/
.left .tooltip{
top:-20%; left:-170%;
}
.left .tooltip::after{
top:40%;
left:90%;
transform: rotate(-90deg);
}
/*bottom*/
.bottom .tooltip { top:115%; left:-20%; }
.bottom .tooltip::after{
top:-17%;
left:40%;
transform: rotate(180deg);
}
/*right*/
.right .tooltip { top:-20%; left:115%; }
.right .tooltip::after{
top:40%;
left:-12%;
transform: rotate(90deg);
}
h3 {
background: #333;
color: #E086D3;
padding: 10px 20px;
border-radius: 56px;
width: 8em;
margin: 20% auto 1% auto;
}
Decolorar imágenes al pasar el puntero en css
Este efecto está chulo, es dinámico, yo lo tengo puesto para que se vean por defecto las imágenes en blanco y negro y sólo cuando se ponga el puntero encima se muestre en color la imagen.
Para que te funcione el código, no olvides nombrar con las clases e ids que se marcan en los códigos
Código CSS
.grayscale .et_pb_gallery_image {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: .8;
}
.grayscale .et_pb_gallery_image:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}
div.pdfemb-viewer{
margin-right: auto !important;
margin-left: auto !important;
}
Efecto zoom en css al poner el puntero encima
Con este efecto harás zoom en la imagen al poner el puntero encima de la fotografía:
Código HTML
<div class=»marcoFoto»><a href=»http://drsoriano.es/»><img src=»https://formacionimplantologica.es/wp-content/uploads/2020/06/dr-soriano.png» width=»300″ height=»229″ alt=»» class=»wp-image-24 alignnone size-medium» /></a></div>
Código CSS
.marcoFoto img {
transition: all .4s ease;
width:100%;
}
.marcoFoto img:hover {
transform:scale(1.2) ;
}
Desaparecer texto encima de imagen
Con este efecto podrás hacer que desaparezca un texto encima de la imagen al hacer hover encima:
HTML
<div class=»contenedor»>
<div id=»image»> <img src=»ejemplo.jpg» /></div>
<div class=»centrado»>Bonito ejemplo</div>
</div>
CSS
.contenedor{
position: relative;
display: inline-block;
text-align: center;
color:white;
}
.texto-encima{
position: absolute;
top: 10px;
left: 10px;
}
.centrado{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contenedor img{
display: block;
filter: brightness(0.5);
}
.contenedor:hover img{
display: block;
filter: brightness(1);
transition-duration: 0.8s;
transition: color 0.8s linear 0.2s;
transition:all .5s ease-in-out;
}
.contenedor:hover .centrado{
display:none !important;
transition:all .5s ease-in-out;
}
Consejo en CSS final
Por último y no menos importante, recuerda que si quieres que el efecto hover afece a varias cosas a la vez en el mismo momento, no pongas líneas de código por separado indicando un efecto de hover en una imagen y otro efecto de hover en un texto (sobretodo cuando afecta a cosas que están en un mismo bloque como en el ejemplo del texto que desaparece encima de la imagen).
En BeaSpaces también se ofrece servicio a quienes buscan una pagina web económica Talavera de la Reina
Es decir, si quieres que afecte a una foto y a un texto a la vez, cúbrelo con un div y pon un id e indica que cuando se haga hover encima de ese div, active varias cosas, por ejemplo:
.contenedor:hover img{}
.contenedor:hover texto{}
En el código anterior le estamos diciendo que cuando se haga el efecto hover en el contenedor se hará un efecto en la imagen y en el texto.
Y por último y no menos importante, recuerda que a Google le gusta que los códigos de CSS estén en en el fichero custom de css y no incrustados en el HTML.
Si estás buscando un diseño web Toledo o en cualquier otra parte de España, no dudes en ponerte en contacto, estarás siempre en línea conmigo de forma directa y con confianza, son muchas las páginas web que he diseñado y estoy segura que encontraré un diseño que te guste a ti.
