Switch color of words inside a headline by hoover

1) Create an enfold heading in a flex-column.
2) if there are columns besides each other it is best to have the equal-height option.
3) i gave to the heading itself a custom class: change-on-hover
4) the hover effect will be active if i’m over the whole column
5) Put in the heading input field:
<span data-hover="About">About </span> <span data-hover="Me">Me</span>

6) The data-hover values do not need to be the same – but it looks better if so
7) do this to quick css:

.change-on-hover .av-special-heading-tag {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 111;
    width: 100%;
    margin: 0 auto !important;
    overflow: hidden;
}

.change-on-hover .av-special-heading-tag span {
font-weight: bold;
    display: inline-block;
    position: relative;
    transition: transform 0.3s;
}

.change-on-hover .av-special-heading-tag span:first-child {
	color: #fff
}
.change-on-hover .av-special-heading-tag span:nth-child(2) {
	color: #ffb400
}

.change-on-hover .av-special-heading-tag span:first-child::before,
.change-on-hover .av-special-heading-tag span:nth-child(2)::before {
	position: absolute;
	content: attr(data-hover);
}

.change-on-hover .av-special-heading-tag span:first-child::before {
	top: 105%
}

.change-on-hover .av-special-heading-tag span:nth-child(2)::before {
	bottom: 105%
}

.flex_column:hover .change-on-hover .av-special-heading-tag span:first-child {
    transform: translate3d(0, -105%, 0);
    color: #ffb400
}

.flex_column:hover .change-on-hover .av-special-heading-tag span:nth-child(2) {
    transform: translate3d(0, 105%, 0);
    color: #fff
}

PS: it works responsive – but maybe it is important to take a relative font-size as i do in the above example 4.5vw

• This reply was modified 6 years, 3 months ago by Guenni007.