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