0

I have these blocks that have these popups that raise up when hovered over or clicked on. But it won't work on mobile. Here is my code for that block.

<div class="container">
<div class="row">
    <div class="col-md-6">
        <div class="card"><img src="dirtymudboard_small2.jpg" class="card-img-top w-100 d-block" />
        <div class="description text-center"> 
            <br><i class="fa fa-angle-up blink" style="font-size:36px"></i><h4>The Problem</h4>

                <h6> Plywood mud boards frequently delaminate.  Resulting in fatigue and wear. Throwing the board away would be wasteful, so the mason tears off the flap of wood to prevent it from catching his trowel. Turning the board to change the angle works temporarily. In time the same board will further delaminate. Again resulting in fatigue and wear.</h6>

                <form action="why_hmd.html">
                       <button type="submit">LEARN MORE</button>
                    </form>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card"><img src="hockey_mud_board_with_mud_small.jpg" class="card-img-top w-100 d-block" />
        <div class="description text-center"> 

            <br>   <i class="fa fa-angle-up blink" style="font-size:36px"></i><h4>The Solution</h4>

                <h6>Hockey Mud Boards are made from the same high density polyethylene as the hockey boards that surround hockey rinks. These boards are solid, empowering masons to approach the mud boards with confidence. Plywood mud boards suck the water out of the mortar, shortening its life. Hockey Mud Boards do not absorb water.</h6>

                <form action="why_hmd.html">
                       <button type="submit">LEARN MORE</button>
                    </form>
            </div>
        </div>
    </div>
</div>

My CSS:

div.description:hover {background-color:#88222f;height:100%;overflow:hidden;}

div.description:hover backgroundcolor:#88222f;height:41%; overflow:hidden;}

div.description {transition:height 500ms;position:absolute;bottom:0px;width:100%; height:30%;font-size:16px z-index:99;background-color:#0b214d;color:white;opacity:0.7;overflow:hidden;}
Nik
  • 11
  • 1
  • What should trigger the `hover` event in the absence of a pointing device like a mouse? A tap? Long touch? – showdev Mar 09 '18 at 00:53
  • I think that's what you're looking for. https://stackoverflow.com/questions/22559756/changing-hover-to-touch-click-for-mobile-devices – Bruno Eduardo Mar 09 '18 at 01:03

0 Answers0