Hover item always active on mobile

Question

My issue is the following. I have a hover effect on the image items but i would like to keep the hover effect when the mobile view is active.

For example:

This is my image on desktop and tablet: Without Hover

This is what it looks like when i hover over it: With Hover

Because mobiles are not user friendly when it comes to hover effects, i would like to have the hover effect already displayed when the user enters the website with a mobile device.

This is my website demo: https://wp.cedesca.com/

I hope you can help me,

thank you in advance.

Here is my code:

<div class="portfolio-image">
<div class="img-portfolio">
    <img src="https://wp.cedesca.com/media/cfgm-tes-480x320.jpg" alt="Técnico/a" en="" emergencias="" sanitarias="" (presencial)="" title="Técnico/a" data-pagespeed-url-hash="938249764" onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
</div>
<div class="portfolio-hover" style="background-color:#cd6730;/* display: block; */">
    <div class="thumb-bg">
        <div class="mask-content">
            <h3>
                <a href="https://wp.cedesca.com/presencial/cfgm-tecnico-a-en-emergencias-sanitarias/" title="Técnico/a en Emergencias Sanitarias (Presencial)">Técnico/a en Emergencias Sanitarias (Presencial)</a>
            </h3>
            <div class="cat_portfolio">
                <a href="https://wp.cedesca.com/portfolio_category/grado-medio/">Grado Medio</a>, 
                <a href="https://wp.cedesca.com/portfolio_category/modalidad-presencial/">Modalidad Presencial</a>
            </div>
            <a href="https://wp.cedesca.com/presencial/cfgm-tecnico-a-en-emergencias-sanitarias/" title="Técnico/a en Emergencias Sanitarias (Presencial)" class="btn_zoom ">Ver más</a>
        </div>
    </div>
</div>

Answer 1

If you are using Bootstrap the breakpoint which is SM for Small Devices you have to apply the breakpoint on the List

in that the portfolio-hover so that in the small devices the portfolio-hover get the width whenever it detects the small devices, not sure about syntax please check

    @media screen (max-width: 575px){
        li{
         .portfolio-hover{
                 background-color: rgb(192, 28, 37);
                 width: 295px;
                 position: absolute;
                 left: 295px;
                 top: 0px;
           }
        }
    }

Upvotes: 0

Answer 2

First, you need to find your breakpoint width. For example, Foundation Zurb has its mobile width to 640px.

So let's take that as example and write a media query

CSS:

@media screen and (max-width: 640px) {
     .portfolio_container .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover, 
     .thim-widget-portfolio .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover {
        -webkit-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
        -webkit-transition: -webkit-transform .4s,opacity .1s;
        -moz-transition: -moz-transform .4s,opacity .1s;
       transition: transform .4s,opacity .1s
       opacity:1;
     }
}

And thats it.

What is a breakpoint:

A breakpoint defines how your elements would like to different versions of your website.

For example:

We will take for example a four columns div. These 4 divs should be next to each other.

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>

Most of the time you have three versions:

• Mobile
• Tablet
• Desktop

The first breakpoint will be the mobile version. Your divs' content might be very big for the mobile version so you want to define a breakpoint where all divs look nice. So if you resize your browser you will be able to see in which width your four divs look best. For this example we will take the 640px.

So there you have your first breakpoint:

 @media screen and (max-width: 640px) {
      .container div{
           width:100%;
      }
 }

This is how it looks like:

.container {
  height:400px;
  border:1px solid black;
  margin:0 auto;
  width:500px;
}
.container .first {
  background:red;
}
.container .second {
  background:yellow;
}
.container .third {
  background:blue;
}
.container .fourth {
  background:green;
}
.container div {
    width:100%;
    height:100px;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>

For the tablet version you might want that the divs to take half the screen each. So you resize the window and then you can find out where you can enter your next breakpoint. Let's say 1024px. This, will override the 640px CSS.

 @media screen and (max-width: 1024px) {
      .container div{
           width:50%;
           float:left;
           height:200px;
      }
 }

.container {
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  width: 500px;
}

.container .first {
  background: red;
}

.container .second {
  background: yellow;
}

.container .third {
  background: blue;
}

.container .fourth {
  background: green;
}

.container div {
  width: 50%;
  float: left;
  height: 200px;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>

And finally you can say that for the desktop version i would like to have all divs next to each other. So pay attention to the following code:

@media screen and (min-width: 1025px) {
      .container div{
          width:25%;
          float:left;
          height:400px;
      }
 }

.container {
  height:400px;
  border:1px solid black;
  margin:0 auto;
  width:500px;
}
.container .first {
  background:red;
}
.container .second {
  background:yellow;
}
.container .third {
  background:blue;
}
.container .fourth {
  background:green;
}
.container div {
    width:25%;
    float:left;
    height:400px;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>

Answer 3

I reviewed your css declaration for the .portfolio-hover component and you have:

.portfolio_container .wapper_portfolio .portfolio_column .style05 li:hover .portfolio-image .portfolio-hover,
.thim-widget-portfolio .wapper_portfolio .portfolio_column .style05 li:hover .portfolio-image .portfolio-hover {
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transition: -webkit-transform .4s,opacity .1s;
    -moz-transition: -moz-transform .4s,opacity .1s;
    transition: transform .4s,opacity .1s
}

So you can add a media query and as you did the hover effect, just remove the :hover pseudo class:

@media only screen and (max-width: 600px) {
    .portfolio_container .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover,
    .thim-widget-portfolio .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover {
        -webkit-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
        -webkit-transition: -webkit-transform .4s,opacity .1s;
        -moz-transition: -moz-transform .4s,opacity .1s;
        transition: transform .4s,opacity .1s
    }
}

This way the .portfolio-hover will be always visible under 600px screen width for example.