Easy hover effect for videos

Developer
Laura Moraiti
Size
1,985 Kb
Views
30,360
  1. Easy hover effect for videos Previews
  2. Easy hover effect for videos HTML Codes
  3. Easy hover effect for videos CSS Codes

How do I make an easy hover effect for videos?

Subtle gradient and scale effect on videos, with a CSS icon with a subtle animation. What is a easy hover effect for videos? How do you make a easy hover effect for videos? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.

Easy hover effect for videos Previews
IQ Test

Easy hover effect for videos - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Easy hover effect for videos</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="img-wrap"> <img src="http://img.youtube.com/vi/_BPVV3fwEyY/mqdefault.jpg"> <div class="play"> <span></span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Easy hover effect for videos - Script Codes CSS Codes

* {box-sizing: border-box;}
img{display: block;}
.img-wrap { position: relative; width: 320px; height: 180px; margin: 2em auto; overflow: hidden;
}
.img-wrap img { -webkit-transition: all .5s ease-in-out;
}
.img-wrap:hover img { -webkit-transform: scale(1.1);
}
.play { top: 0; bottom: 0; left: 0; right: 0;	z-index: 10; position: absolute;	transition: all .3s ease-in; cursor: hand; cursor: pointer; transition: all .3s ease-in;
}
.play:hover { background-image: linear-gradient(to bottom right, rgb(69,200,220), rgba(69,200,220,.2));	}
.play span { border: 3px solid rgba(255,255,255,.5); border-radius: 100%; width: 5em; height: 5em; display: block; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; transition: all .5s ease-in; right: 0;
}
.play span:before { content: ""; width: 0; height: 0; border-left: 1.5em solid rgba(255,255,255,.5); border-right: 1.5em solid transparent; border-bottom: 1em solid transparent; border-top: 1em solid transparent; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: -2em; margin: auto; transition: all .5s ease-in;
}
.play:hover span { border-color: #fff;
}
.play:hover span:before { border-left-color: #fff;
}
Easy hover effect for videos - Script Codes
Easy hover effect for videos - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3
Size 1,985 Kb
Views 30,360
Do you need developer help for Easy hover effect for videos?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Laura Moraiti (Fixie) Script Codes
Name
Horizontal infinite loop newsticker
WIP
A Pen by Laura Moraiti
Music equalizer bars with jQuery
Simple gallery jquery
Edit inline text and hidden input with jQuery
Dynamic prefix, transition and transform SASS mixins
Reusable simple dropdown
Striped background for a container with more than one element
WIP accordion without jQueryUI
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!