css – Trigger hover state by clicking on link

Question

I’m trying to achieve activating a hover state by using a tag on click. I’m currently using a WordPress module to achieve this hover effect and the hover works perfect but on mobile it doesn’t unless the image is tapped on, so I’ll use the View Bio link to act as a trigger for the hover effect on mobile, code below:

FIDDLE:
https://jsfiddle.net/zuh_fiddl3/wkasqhme/10/

HTML:

<div class="container">
<div class="ult-ih-container ult-adjust-bottom-margin  " style="visibility: visible; opacity: 1;">
  <ul class="ult-ih-list " data-shape="square" data-width="509" data-height="321" style="text-align:left; ">
    <li id="ult-ih-list-item-7023" class="ult-ih-list-item" style="height: 321px; width: 509px;  margin: 15px">
      <div style="height: 321px; width: 509px; " class="ult-ih-item ult-ih-effect13 ult-ih-bottom_to_top ult-ih-square">
        <div class="ult-ih-image-block" style="height: 321px; width: 509px; ">
          <div class="ult-ih-wrapper" style=""></div> <img class="ult-ih-image" src="https://media.istockphoto.com/photos/doing-business-with-a-smile-picture-id1330546092?b=1&k=20&m=1330546092&s=170667a&w=0&h=brj2RTauaIvDQbJqobBjLLw72xBZh80H9Vyr_BhoDnA=" alt="null">
        </div>
        <div class="ult-ih-info" style="background-color: #262626; ">
          <div class="ult-ih-info-back">
            <div class="ult-ih-content">
              <div class="ult-ih-heading-block" style="">
                <h2 class="ult-ih-heading ult-responsive" style="color:#e9e9e5;" data-ultimate-target="#ult-ih-list-item-7023 .ult-ih-heading">Lorem</h2>
              </div>
              <div class="ult-ih-divider-block" style="height:1px;"> <span class="ult-ih-line" style="border-style:none;border-color:rgba(255,255,255,0.75);width:100px;border-width:1px;"></span> </div>
              <div class="ult-ih-description-block" style="">
                <div class="ult-ih-description ult-responsive" style="color:#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 ad 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: visible
}

.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: visible
}

.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%);
  transform: 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%);
  transform: 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);
  transform: 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);
  transform: 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%);
  transform: 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%);
  transform: 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);
  transform: 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);
  transform: 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%);
  transform: 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%);
  transform: 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);
  transform: 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);
  transform: 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%);
  transform: 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%);
  transform: 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);
  transform: 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);
  transform: translateY(0)
}

0
ZUH. 3 weeks 2022-07-28T02:19:25-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse