Image Hover Effects

Image Hover Effects

<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>