RollOver Effect 2

Developer
Lisa Macken
Size
2,162 Kb
Views
14,168
  1. RollOver Effect 2 Previews
  2. RollOver Effect 2 HTML Codes
  3. RollOver Effect 2 CSS Codes

How do I make an rollover effect 2?

What is a rollover effect 2? How do you make a rollover effect 2? This script and codes were developed by Lisa Macken on 01 October 2022, Saturday.

RollOver Effect 2 Previews
IQ Test

RollOver Effect 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>rollOver Effect 2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="aligncenter-find"> <div class="find-wide"> <a href="https://popertee.com/listing-category/kiosks/"> <img class="find-image" src="https://popertee.com/wp-content/uploads/2016/07/Kiosk-image-e1467982257742.png" alt="pop up kiosk"/> <div class="find-text-wide">
<div id="find-icon"><img src="https://popertee.com/wp-content/uploads/2016/09/kiosk.png" alt="pop up kiosk dublin"/>
</div>
<h2>Kiosk</h2> <span> Good things happen in small spaces </span> </div></a> </div>
</body>
</html>

RollOver Effect 2 - Script Codes CSS Codes

#find-icon img{ display:-webkit-inline-box; padding-top: 20px; max-height: 20%; max-width: 20%; text-align: center; position: relative; overflow: hidden; background-color: transparent; opacity: 1;
}
.find-wide { float: left;	width: 34%;	margin: 0.5% 0;	margin-bottom: 5px; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; background: rgba(0, 0, 0, 0.9);
}
.find-wide .find-text-wide { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0;
}
.find-text-wide span{ font-family:"roboto"; font-size: 0.9em; opacity:0.5;
}
.find-text-wide img{ max-width: 2px; max-height: 2px;
}
.find-wide img { display: block; position: relative; max-width: none; width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.find-wide:hover img { opacity: 0.4; filter: alpha(opacity=40); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
}
.find-wide h2 { font-family:"Open Sans"; text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 1.5em; overflow: hidden; padding: 0.2em 0; background-color: transparent;
}
.find-wide h2:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);
}
.find-wide:hover h2:after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
}
.find-wide a, .find-wide p { color: #FFF; opacity: 0.2; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);
}
.find-wide:hover a, .find-wide:hover p { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
}
RollOver Effect 2 - Script Codes
RollOver Effect 2 - Script Codes
Home Page Home
Developer Lisa Macken
Username lmack90
Uploaded October 01, 2022
Rating 3
Size 2,162 Kb
Views 14,168
Do you need developer help for RollOver Effect 2?

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!

Lisa Macken (lmack90) Script Codes
Name
Carousel
Animation examples
Columns everywhere
A Pen by Lisa Macken
SVG icons
CodeCamp - Front-End Challenge
Simple Quiz
Menu smoothscroll
Image moves with mouse
A JQuery Mobile Quiz Game
Create amazing marketing copy 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!