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

23/11/2024 Black Friday 2024

BIG SALE, 30% discount for all our extensions. Use BF24 coupon code. Hurry up the discount is valid till 3 December.

more...
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...

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 6 Years 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.