demo-widget

About

Coded this small piece of markup for my own service in order to offer discounts

I've removed my content from codepen version so it is easy to customize and add your own content

The "modal" is using :target selector for the show/hide content ... pure CSS, no programming language

If you plan to use it on your own webpage, I'd suggest downloading the images and host tem on your own service, just in case the current host is deleting them

This was inspired from a video streaming site. Don't worry, no resources or markup was used from their platform, its all manually coded by me :)

It can be used on MyFreeCams too

The CSS markup

.hideit{padding:20px;}
.hideit #wrap{display:block;width:100px;height:100px;position:fixed;bottom:30px;right:36px;overflow:hidden;z-index:10000;transition:all 0.5s;}
.hideit #wrap .closed{display:none;text-align:right;}
.closed a{display:block;width:20px;height:20px;text-align:center;opacity:0.2;}
.closed a:hover{display:block;width:20px;height:20px;text-align:center;opacity:1;}
.closed img{opacity:0.4;}
.closed:hover img{width:20px;height:20px;opacity:1;}
.hideit #wrap:target{display:block;width:450px;height:300px;position:fixed;bottom:30px;right:33px;overflow:hidden;background-color:#f1f1f1;z-index:10000;border-radius:7px;box-shadow:0 2px 11px #000;}
.hideit #wrap:target .closed{display:block;}
.coinfo{display:block;width:90%;height:200px;overflow:hidden;margin:0 auto;}
#wrap:target > .coinfo{display:block;width:90%;height:200px;overflow:auto;margin:0 auto;background-color:#fff;opacity:1;padding:10px;}.coinfo p{font-size:15px;line-height:normal;font-family:Tahoma, Geneva, sans-serif;color:#555;}.goreadall{display:block;text-align:center;margin:10px auto 12px auto;}img.viewz{display:block;width:100px;height:100px;opacity:1;float:left;}
.flaire{display:block;position:fixed;bottom:30px;right:33px;overflow:hidden;z-index:99;width:140px;height:140px;background-image: url('https://camgirlbioeditor.files.wordpress.com/2018/05/circle1.png');background-repeat:no-repeat;background-position:center;background-size:cover;-webkit-animation:circle infinite 12s;animation:circle infinite 12s;}
.flaire2{display:block;position:fixed;bottom:30px;right:33px;overflow:hidden;z-index:999;width:140px;height:140px;background-image: url('https://camgirlbioeditor.files.wordpress.com/2018/05/flair_2.png');background-repeat:no-repeat;background-position:center;background-size:cover;-webkit-animation:flair infinite 19s;animation:flair infinite 19s;}
.flaire3{display:block;position:fixed;bottom:30px;right:33px;overflow:hidden;z-index:999;width:140px;height:140px;background-image: url('https://camgirlbioeditor.files.wordpress.com/2018/05/flair_4.png');background-repeat:no-repeat;background-position:center;background-size:cover;-webkit-animation:dots infinite 25s;animation:flair infinite 25s;transition:all .3s;}
#izyter{display:block;width:150px;height:150px;}#izyter:hover .flaire3{display:block;position:fixed;bottom:30px;right:33px;overflow:hidden;z-index:999;width:140px;height:140px;background-image: url('https://camgirlbioeditor.files.wordpress.com/2018/05/flair_4b.png');background-repeat:no-repeat;background-position:center;background-size:cover;-webkit-animation:dots infinite 25s;animation:flair infinite 25s;}.goreadall a,.goreadall a:visited,.goreadall a:active {padding:7px 12px;background-color:#099;color:#f1f1f1;text-decoration:none;}.goreadall a:hover{background-color:#222;color:#fff;text-decoration:none;}
@keyframes circle{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-webkit-keyframes circle{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

@keyframes dots{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-webkit-keyframes dots{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@keyframes flair{
    0%{transform: rotate(360deg);}
    100%{transform: rotate(0deg);}
}
@-webkit-keyframes flair{
    0%{transform: rotate(360deg);}
    100%{transform: rotate(0deg);}
}

The HTML markup

Image resources

As I've mentioned above, if you plan to use this, download and host the images on your service

Images from HTML markup:

Gift image - PNG with transparent background - 100x100 https://camgirlbioeditor.files.wordpress.com/2018/05/gift2.png

Close image (little "x" from right corner) - PNG with transparent background - 20x20 https://camgirlbioeditor.files.wordpress.com/2018/05/times.png

Images from CSS markup:

Circle 1 - PNG with transparent background - 140x140 https://camgirlbioeditor.files.wordpress.com/2018/05/circle1.png

Flair 2 - PNG with transparent background - 140x140 https://camgirlbioeditor.files.wordpress.com/2018/05/flair_2.png

Flair 4 - PNG with semi-transparent background - 140x140 https://camgirlbioeditor.files.wordpress.com/2018/05/flair_4.png

Flair 4b / visible on hover - PNG with semi-transparent background - 140x140 https://camgirlbioeditor.files.wordpress.com/2018/05/flair_4b.png