<style><!-- [et_pb_line_break_holder] -->/*************Advent Calendar 2017 - 6*************/<!-- [et_pb_line_break_holder] -->/******Three Easy to Edit Image Hover Effects******/<!-- [et_pb_line_break_holder] -->/******************By Divi Soup********************/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/***Effect 1 - Show text on hover***/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Postion the text module and centrally align text*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-text-show {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 0;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] --> cursor: pointer;<!-- [et_pb_line_break_holder] --> display: -webkit-box;<!-- [et_pb_line_break_holder] --> display: -ms-flexbox;<!-- [et_pb_line_break_holder] --> display: flex;<!-- [et_pb_line_break_holder] --> -webkit-box-orient: vertical;<!-- [et_pb_line_break_holder] --> -webkit-box-direction: normal;<!-- [et_pb_line_break_holder] --> -ms-flex-direction: column;<!-- [et_pb_line_break_holder] --> flex-direction: column;<!-- [et_pb_line_break_holder] --> -webkit-box-pack: center;<!-- [et_pb_line_break_holder] --> -ms-flex-pack: center;<!-- [et_pb_line_break_holder] --> justify-content: center;<!-- [et_pb_line_break_holder] --> -webkit-transition: all .7s ease;<!-- [et_pb_line_break_holder] --> transition: all .7s ease;<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Show text on hover*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-text-show:hover {<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Text link colour*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-text-show a {<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Bold text*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-text-show mark {<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> background: transparent;<!-- [et_pb_line_break_holder] --> font-weight: bold;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/***End Effect 1 - Show text on hover***/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/***Effect 2 - Hide text on hover***/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Postion the text module and centrally align text*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-text-hide {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 0;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] --> cursor: pointer;<!-- [et_pb_line_break_holder] --> display: -webkit-box;<!-- [et_pb_line_break_holder] --> display: -ms-flexbox;<!-- [et_pb_line_break_holder] --> display: flex;<!-- [et_pb_line_break_holder] --> -webkit-box-orient: vertical;<!-- [et_pb_line_break_holder] --> -webkit-box-direction: normal;<!-- [et_pb_line_break_holder] --> -ms-flex-direction: column;<!-- [et_pb_line_break_holder] --> flex-direction: column;<!-- [et_pb_line_break_holder] --> -webkit-box-pack: center;<!-- [et_pb_line_break_holder] --> -ms-flex-pack: center;<!-- [et_pb_line_break_holder] --> justify-content: center;<!-- [et_pb_line_break_holder] --> -webkit-transition: all .7s ease;<!-- [et_pb_line_break_holder] --> transition: all .7s ease;<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Hide text on hover*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-text-hide:hover {<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Text link colour*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-text-hide a {<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Bold text*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-text-hide mark {<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> background: transparent;<!-- [et_pb_line_break_holder] --> font-weight: bold;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/***End Effect 2 - Hide text on hover***/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/***Effect 3 - Image swap on hover***/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Position the image to be shown on hover*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-image-swap {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 0;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] --> -webkit-transition: all 1s ease-in-out;<!-- [et_pb_line_break_holder] --> transition: all 1s ease-in-out;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Show the image on hover*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.ds-advent-6-image-swap:hover {<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/***End Effect 3 - Image swap on hover***/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*************Advent Calendar 2017 - 6*************/<!-- [et_pb_line_break_holder] -->/***End - Three to Edit Easy Image Hover Effects***/<!-- [et_pb_line_break_holder] -->/******************By Divi Soup********************/<!-- [et_pb_line_break_holder] --></style>

Image swap on hover

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies