How to make hover also work on onclick?

Question

Sorry for asking this question which may have been answered before. Unfortunately I don't understand the complexities of some of the responses.

I have a bit of code that works beautifully on desktops when the mouse is hovered over it - but just sits there on mobile devices (I understand because they don't have the mouse-over capability).

How do I make this code work with both hover and onclick?

Here is my code. Much Appreciated

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Original Hover Effects with CSS3</title>
    <meta charset="UTF-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <style>


    .view {
      width: 300px;
      height: 200px;
      margin: 10px;
      float: left;
      border: 10px solid #fff;
      overflow: hidden;
      position: relative;
      text-align: center;
      -webkit-box-shadow: 1px 1px 2px #e6e6e6;
      -moz-box-shadow: 1px 1px 2px #e6e6e6;
      box-shadow: 1px 1px 2px #e6e6e6;
      cursor: default;
      background: #fff url(../images/bgimg.jpg) no-repeat center center;
    }
    .view .mask,.view .content {
      width: 300px;
      height: 200px;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
    }
    .view img {
      display: block;
      position: relative;
    }
    .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 17px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.8);
      margin: 20px 0 0 0;
    }
    .view p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      position: relative;
      color: #fff;
      padding: 10px 20px 20px;
      text-align: center;
    }
    .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 14px;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      -webkit-box-shadow: 0 0 1px #000;
      -moz-box-shadow: 0 0 1px #000;
      box-shadow: 0 0 1px #000;
    }
    .view a.info: hover {
      -webkit-box-shadow: 0 0 5px #000;
      -moz-box-shadow: 0 0 5px #000;
      box-shadow: 0 0 5px #000;
    }



    .view-tenth img {
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      -o-transform: scaleY(1);
      -ms-transform: scaleY(1);
      transform: scaleY(1);
      -webkit-transition: all 0.7s ease-in-out;
      -moz-transition: all 0.7s ease-in-out;
      -o-transition: all 0.7s ease-in-out;
      -ms-transition: all 0.7s ease-in-out;
      transition: all 0.7s ease-in-out;
    }
    .view-tenth .mask {
      background-color: rgba(255, 231, 179, 0.3);
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .view-tenth h2 {
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
      background: transparent;
      margin: 20px 40px 0px 40px;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      color: #333;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .view-tenth p {
      color: #333;
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
    }
    .view-tenth a.info {
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
    }
    .view-tenth:hover img {
      -webkit-transform: scale(10);
      -moz-transform: scale(10);
      -o-transform: scale(10);
      -ms-transform: scale(10);
      transform: scale(10);
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .view-tenth:hover .mask {
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }
    .view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }


    </style>
</head>
<body>
    <div class="container">
        <!-- TENTH EXAMPLE -->
        <div class="view view-tenth">
            <img src="images/quokka-jumping.jpg">
            <div class="mask">
                <h2>Quokka</h2>
                <p>Best known for its cute Mona-Lisa smile and the love of selfies the quokka is always happy. The little quokka is hard to resist!</p><a class="info" href="http://panique.com.au/trishansoz/animals/quokka.html">Read More</a>
            </div>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript">
    </script>
</body>
</html>

How are you testing your code on mobile? It seems to work fine with Chrome responsive mode on my laptop. When I click the image, the hover text shows up and when I click elsewhere on the page, the hover text goes away. — supersam654, Apr 23 '17 at 01:47
It works on the Desktop. Shows image frist and on hover it displays the text. On mi iPhone and iPad the image shows but when you touch the screen it does nothing. And of course if I link it to another html it goes there without displaying the underlying text. — Michael Peruma, Apr 25 '17 at 08:56

score 0 · Answer 1 · answered Apr 23 '17 at 01:48

0

.view a.info:hover,
.view a.info:focus,
.view a.info:active {
  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

answered Apr 23 '17 at 01:48

Jason Y

831
5
10

The above doesn't work on the iPhone. I am expecting it to show the text when I touch the image displayed. – Michael Peruma Apr 25 '17 at 08:44
Tried first answer it didn't work. I got lost trying to follow the second. – Michael Peruma Apr 25 '17 at 08:58

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

you can use touchstart and touchend event to simulate hover on mobile devices .

this answer would help

edited May 23 '17 at 11:54

Community

1
1

answered Apr 23 '17 at 01:55

Julien

1,230
16
20

How to make hover also work on onclick?

2 Answers2