How To Add A Play Icon To Image On CSS
I'm looking for how to add a play icon to Image on CSS. I tried this code, but it doesn't appear right I want it to appear on the center : .video { position: relative; } .vide
Solution 1:
you should set background-size
.video a {
position: absolute;
display: block;
background: url(http://www.slatecube.com/images/play-btn.png);
height: 100%;
width: 100%;
top: 75px;
left: 150px;
background-size: 50px 50px;
background-repeat: no-repeat;
}
Solution 2:
You can achieve this without your image, which should reduce load times: http://jsfiddle.net/t8skLwcb/
* {
box-sizing: border-box;
}
.video {
position: relative;
display: table;
height: 200px;
width: 357px;
background: url(https://upload.wikimedia.org/wikipedia/commons/b/b8/Messi_vs_Nigeria_2018.jpg) no-repeat;
background-size: 100%;
}
.video a {
display: table-cell;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
.video a .circle {
display: inline-block;
border: 3px solid white;
border-radius: 25px;
padding: 20px;
height: 10px;
width: 10px;
}
.video a .circle .triangle {
display: inline-block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
transform: translate(-25%, -50%);
}
<div class="video">
<a href="#">
<span class="circle">
<span class="triangle"></span>
</span>
</a>
</div>
Solution 3:
Use background-size:contain; and center the background:
background: url(http://www.slatecube.com/images/play-btn.png) no-repeat center;
background-size:contain;
JsFiddle: http://jsfiddle.net/z5y8ht4y/2/
Solution 4:
For click even use jquery or javascript
Jquery
Example: http://jsfiddle.net/kevalbhatt18/z5y8ht4y/4/
And reduce width of play button to 11% if you not reduce width then in left region you want be click
see this example with 100% width of play http://jsfiddle.net/kevalbhatt18/z5y8ht4y/3
$('img').click(function(){
alert('clicked')
})
Or use z-index if you want 100% width but it may be break your layout because play has position : absolute
Javascript:
HTML
<img onclick="clickfunction()" style="height:200px" src="http://san.capitalafrique.com/imatin.net/articles/images/lionel-messi.jpg" /> <a href="#"></a>
Script
clickfunction = function () {
alert()
}
Solution 5:
may be this ? (if you know the size of the image/s)
.video {
position: relative;
background-image: url('http://san.capitalafrique.com/imatin.net/articles/images/lionel-messi.jpg');
width:400px;
height:200px;
}
.link{
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
background-color:rgba(255,255,255,0.5);
}
.link:hover{
background-color:rgba(255,255,255,0.7);
}
.playBtn {
position: absolute;
background-image:url("http://www.slatecube.com/images/play-btn.png");
background-size: 150px 150px;
height: 150px;
width: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:999;
}
<div class="video" >
<a href="#" class="link">
<div class="playBtn"></div>
</a>
</div>
Post a Comment for "How To Add A Play Icon To Image On CSS"