Img Hover Test

Developer
Jeremy Caris
Size
2,416 Kb
Views
16,192
  1. Img Hover Test Previews
  2. Img Hover Test HTML Codes
  3. Img Hover Test CSS Codes

How do I make an img hover test?

What is a img hover test? How do you make a img hover test? This script and codes were developed by Jeremy Caris on 06 November 2022, Sunday.

Img Hover Test Previews
IQ Test

Img Hover Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Img Hover Test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="hover horz" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/01-details.jpg);"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/01-details-hover.jpg);">Monochramatic Accents</span></a>
<a href="#" class="hover vert" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/02-details.jpg);"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/02-details-hover.jpg);">Benefits of Greenery</span></a>
<br />
<a href="#" class="hover vert" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/04-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/04-details-hover.jpg) no-repeat;">Embracing Singularity</span></a>
<a href="#" class="hover horz" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/03-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/03-details-hover.jpg) no-repeat;">Power of Layering</span></a>
<br />
<a href="#" class="hover horz" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/05-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/05-details-hover.jpg) no-repeat;">Style meets Function</span></a>
<a href="#" class="hover vert" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/06-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/06-details-hover.jpg) no-repeat;">Declutter the Visual</span></a>
<br />
<a href="#" class="hover vert" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/08-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/08-details-hover.jpg) no-repeat;">Bold Accents</span></a>
<a href="#" class="hover horz" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/07-deatils.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/07-deatils-hover.jpg) no-repeat;">Less is More</span></a>
<br />
<a href="#" class="hover horz" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/09-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/09-details-hover.jpg) no-repeat;">Draw the Eye</span></a>
<a href="#" class="hover vert" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/10-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/10-details-hover.jpg) no-repeat;">Design Unity</span></a>
<br />
<a href="#" class="hover vert" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/12-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/12-details-hover.jpg) no-repeat;">Harmony in Repetition</span></a>
<a href="#" class="hover horz" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/11-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/11-details-hover.jpg) no-repeat;">Mixing of Genres</span></a>
<br />
<a href="#" class="hover horz" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/13-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/13-details-hover.jpg) no-repeat;">Keying the Mood</span></a>
<a href="#" class="hover vert" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/14-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/14-details-hover.jpg) no-repeat;">The 360 of Services</span></a>
<br />
<a href="#" class="hover vert" style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/15b-details.jpg) no-repeat;"><span style="background: url(https://sbrosio.wpengine.com/wp-content/uploads/15b-details-hover.jpg) no-repeat;">Embracing Opportunities</span></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Img Hover Test - Script Codes CSS Codes

.hover { display: inline-block; position: relative; background-repeat: no-repeat !important;
}
.hover span { text-indent: -9999px; background-repeat: no-repeat !important; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s;
}
.hover:hover span { opacity: 1;
}
.horz,
.horz span { width: 439px; height: 318px;
}
.vert { width: 245px; height: 318px;
}
Img Hover Test - Script Codes
Img Hover Test - Script Codes
Home Page Home
Developer Jeremy Caris
Username jeremycaris
Uploaded November 06, 2022
Rating 3
Size 2,416 Kb
Views 16,192
Do you need developer help for Img Hover Test?

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!

Jeremy Caris (jeremycaris) Script Codes
Name
JQuery Test
Vertical center div Test
714Web Website Footer Tag
Skewed Background
Simple Horizontal List
Responsive Testimonial Quote Bubble
Img Hover Test 2
Email Advertisement Block
A Pen by Jeremy Caris
Make phone number a click to call link with jQuery
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!