Home When clicking a button, how do you make video and text appear?
Reply: 0

When clicking a button, how do you make video and text appear?

user1137
1#
user1137 Published in April 24, 2018, 8:34 am

I'm actually quite lost and don't know where to start. So basically what I'm trying to achieve is when the button is clicked, the text and video will reveal. Otherwise hide it when clicked away.

picture of how I want it preview on the html page

HTML

<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
    <video preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>

<div class="shape1"></div>
    <p class="ability1txt">Text.</p>
<div class="button.abl">
    <button id="abl1.btn" class="ability1"></button>
</div>

CSS

abl1 video{
    height: 500px;
    width: 600px;
    z-index: 1;
    position: absolute;
    margin-top: 50px;
    margin-left: 200px;
}


.ability1txt{
    position: absolute;
    text-align: center;
    width: 600px;
    font-size: 27px;
    z-index: 10px;
    margin-left: 55%;
    margin-top:8%;
    font-family: "BigNoodleTitling";
    color: white;  
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.472419 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO