I am attempting to realize activating a hover state through the use of a tag on click on. I am presently utilizing a WordPress module to realize this hover impact and the hover works good however on cellular it does not until the picture is tapped on, so I will use the View Bio hyperlink to behave as a set off for the hover impact on cellular, code beneath:
FIDDLE:
https://jsfiddle.web/zuh_fiddl3/wkasqhme/10/
HTML:
<div class="container">
<div class="ult-ih-container ult-adjust-bottom-margin " type="visibility: seen; opacity: 1;">
<ul class="ult-ih-list " data-shape="sq." data-width="509" data-height="321" type="text-align:left; ">
<li id="ult-ih-list-item-7023" class="ult-ih-list-item" type="top: 321px; width: 509px; margin: 15px">
<div type="top: 321px; width: 509px; " class="ult-ih-item ult-ih-effect13 ult-ih-bottom_to_top ult-ih-square">
<div class="ult-ih-image-block" type="top: 321px; width: 509px; ">
<div class="ult-ih-wrapper" type=""></div> <img class="ult-ih-image" src="https://media.istockphoto.com/photographs/doing-business-with-a-smile-picture-id1330546092?b=1&okay=20&m=1330546092&s=170667a&w=0&h=brj2RTauaIvDQbJqobBjLLw72xBZh80H9Vyr_BhoDnA=" alt="null">
</div>
<div class="ult-ih-info" type="background-color: #262626; ">
<div class="ult-ih-info-back">
<div class="ult-ih-content">
<div class="ult-ih-heading-block" type="">
<h2 class="ult-ih-heading ult-responsive" type="colour:#e9e9e5;" data-ultimate-target="#ult-ih-list-item-7023 .ult-ih-heading">Lorem</h2>
</div>
<div class="ult-ih-divider-block" type="top:1px;"> <span class="ult-ih-line" type="border-style:none;border-color:rgba(255,255,255,0.75);width:100px;border-width:1px;"></span> </div>
<div class="ult-ih-description-block" type="">
<div class="ult-ih-description ult-responsive" type="colour:#e9e9e5;" data-ultimate-target="#ult-ih-list-item-7023 .ult-ih-description, #ult-ih-list-item-7023 .ult-ih-description p">
<p class="team-title-hover">DIRECTOR</p>
<p class="team-description-hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a href="#">View Bio</a>
</div>
CSS:
.container {
width: 50px;
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13 .ult-ih-info,
.ult-ih-item.ult-ih-square.ult-ih-effect13 .ult-ih-info {
opacity: 0;
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13 .ult-ih-info .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13 .ult-ih-info .ult-ih-heading {
visibility: hidden;
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13 .ult-ih-info .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13 .ult-ih-info .ult-ih-description {
visibility: hidden;
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13:hover .ult-ih-info,
.ult-ih-item.ult-ih-square.ult-ih-effect13:hover .ult-ih-info {
opacity: 1
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13:hover .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13:hover .ult-ih-heading {
visibility: seen
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13:hover .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13:hover .ult-ih-description {
visibility: seen
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-right_to_left .ult-ih-info .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-right_to_left .ult-ih-info .ult-ih-heading {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
remodel: translateX(100%)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-right_to_left .ult-ih-info .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-right_to_left .ult-ih-info .ult-ih-description {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
remodel: translateX(-100%)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-right_to_left:hover .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-right_to_left:hover .ult-ih-heading {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
remodel: translateX(0)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-right_to_left:hover .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-right_to_left:hover .ult-ih-description {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
remodel: translateX(0)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-left_to_right .ult-ih-info .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-left_to_right .ult-ih-info .ult-ih-heading {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
remodel: translateX(-100%)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-left_to_right .ult-ih-info .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-left_to_right .ult-ih-info .ult-ih-description {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
remodel: translateX(100%)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-left_to_right:hover .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-left_to_right:hover .ult-ih-heading {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
remodel: translateX(0)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-left_to_right:hover .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-left_to_right:hover .ult-ih-description {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
remodel: translateX(0)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-top_to_bottom .ult-ih-info .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-top_to_bottom .ult-ih-info .ult-ih-heading {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
remodel: translateY(-100%)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-top_to_bottom .ult-ih-info .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-top_to_bottom .ult-ih-info .ult-ih-description {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
remodel: translateY(-100%)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-top_to_bottom:hover .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-top_to_bottom:hover .ult-ih-heading {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
remodel: translateY(0)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-top_to_bottom:hover .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-top_to_bottom:hover .ult-ih-description {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
remodel: translateY(0)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-bottom_to_top .ult-ih-info .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-bottom_to_top .ult-ih-info .ult-ih-heading {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
remodel: translateY(100%)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-bottom_to_top .ult-ih-info .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-bottom_to_top .ult-ih-info .ult-ih-description {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
remodel: translateY(100%)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-bottom_to_top:hover .ult-ih-heading,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-bottom_to_top:hover .ult-ih-heading {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
remodel: translateY(0)
}
.ult-ih-item.ult-ih-circle.ult-ih-effect13.ult-ih-bottom_to_top:hover .ult-ih-description,
.ult-ih-item.ult-ih-square.ult-ih-effect13.ult-ih-bottom_to_top:hover .ult-ih-description {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
remodel: translateY(0)
}