RollOver Effect 2

Developer
Lisa Macken
Size
2,162 Kb
Views
14,161

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,161
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
A JQuery Mobile Quiz Game
Image moves with mouse
JQuery Accordian Slider
Columns everywhere
Carousel
A Pen by Lisa Macken
Simple Quiz
SmoothScroll Navigation 2
CodeCamp - Front-End Challenge
Scrollable svg Animations
Create amazing blog posts 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!