ARI Soft - How to add a play icon to Image on CSS

Home

News

Forum

About Us

Demos

Products

F.A.Q.

Featured Demos

ARI Smart Content demo

ARI Quiz demo

WordPress Quiz plugin

WordPress Lightbox plugin

e-mail: info@ari-soft.com

Shopping Cart

You currently have 0 items in your cart.

Show Cart

Recent Events

31/12/2023 New Year SALE

We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

more...
21/11/2023 BLACK FRIDAY 23 is coming

BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.

more...

2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft.

Welcome, Guest
Please Login or Register. Lost Password?

ARI Soft Forum

WordPress plugins

ARI Fancy Lightbox

How to add a play icon to Image on CSS

(1 viewing) (1) Guest

"ARI Fancy Lightbox" WordPress plugin

Page: 12

TOPIC: How to add a play icon to Image on CSS

Forum Tools

#64084

Re:How to add a play icon to Image on CSS 5 Years, 5 Months ago Karma: 0

this is good

html

Code:

<div class="wrapper-v">

   <div class="youtube-v">

        <a href="https://youtu.be/datov3ICOr4">

            <img src="https://img.youtube.com/vi/datov3ICOr4/sddefault.jpg" alt="FUNNY KIDS" />

            <span class="play-button-v">

            </span>

        </a>

    </div>

</div>

style

Code:

/*fancy lightbox y-v*/

.wrapper-v {

    position: relative;

    width: 100%;

    height: 0;

    padding-bottom: 56.25%;

}

.youtube-v {

    overflow: hidden;

    height: 0;

    padding-top: 56.25%;

    margin-bottom: 30px;

    position: relative;

    cursor: pointer;

    background-color: #000;

}

.youtube-v img {

    width: 100%;

    position: absolute;

    top: -16.84%;

    left: 0;

    /*opacity: .7;*/

    cursor: pointer;

}

.youtube-v .play-button-v {

    position: absolute;

    z-index: 1;

    top: 50%;

    left: 50%;

    transform: translate3d(-50%,-50%,0);

    cursor: pointer;

}

.youtube-v .play-button-v:before {

    display: block;

    font-size: 70px;

    line-height: 1;

    font-family: mace;

    content: "\e010";

    text-shadow: 0 10px 20px rgba(0,0,0,.2);

    color: #fff;

}

.youtube-v .play-button-v:hover::before {

    opacity:0.6;

}

thank you

momo7f

The administrator has disabled public write access.