Dropdown menu with image change on hover

Developer
Shannon Range
Size
2,747 Kb
Views
22,264
  1. Dropdown menu with image change on hover Previews
  2. Dropdown menu with image change on hover HTML Codes
  3. Dropdown menu with image change on hover CSS Codes

How do I make an dropdown menu with image change on hover?

Can't get it to work right - when mouse hovers over image, the last tab is highlighted -- user shouldn't be able to change image by hovering on image area. What is a dropdown menu with image change on hover? How do you make a dropdown menu with image change on hover? This script and codes were developed by Shannon Range on 10 November 2022, Thursday.

Dropdown menu with image change on hover Previews
IQ Test

Dropdown menu with image change on hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>dropdown menu with image change on hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav-wrapper"> <div class="nav-container">
<div class="nav">
<ul>
<li><a href="project">The Project</a> <img alt="" src="http://raisingofamerica.org/sites/all/themes/raisingofamerica/images/1.jpg" /></li>
<li><a href="documentary">The Documentary</a> <img alt="" src="http://raisingofamerica.org/sites/all/themes/raisingofamerica/images/2.jpg" /> <ul> <li><a href="preview-series">Preview the Series</a></li> <li><a href="crazy-about-our-kids">Are We Crazy About Our Kids?</a></li> </ul> </li>
<li><a href="campaign">The Campaign</a> <img alt="" src="http://raisingofamerica.org/sites/all/themes/raisingofamerica/images/logos.png" /> <ul> <li><a href="join-campaign">Join The Campaign</a></li> <li><a href="partners">Public Engagement Partners</a></li> <li><a href="launch-events">Launch Events</a></li> <li><a href="FAQs">FAQs</a></li> </ul> </li>
<li><a href="get-involved">Get Involved</a> <img alt="" src="http://raisingofamerica.org/sites/all/themes/raisingofamerica/images/5.jpg" /> <ul> <li><a href="connect-up">Connect Up!</a></li> </ul>
</li>
</ul>
</div>
<img alt="" src="http://raisingofamerica.org/sites/all/themes/raisingofamerica/images/1.jpg" /></div>
</div>
</body>
</html>

Dropdown menu with image change on hover - Script Codes CSS Codes

div.nav {
display:table; width: 100%;
border-collapse: collapse;
border: none;
position:relative;
}
div.nav ul {
display: table-row;
}
div.nav li {
display: table-cell;
margin: 0;
text-align:center;
background: #7a6658; /* Old browsers */
background: -moz-linear-gradient(top, #7a6658 0%, #655348 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a6658), color-stop(100%,#655348)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7a6658 0%,#655348 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7a6658 0%,#655348 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7a6658 0%,#655348 100%); /* IE10+ */
background: linear-gradient(to bottom, #7a6658 0%,#655348 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a6658', endColorstr='#655348',GradientType=0 ); /* IE6-9 */
padding: 8px 0;
border-left: 1px solid gray;
border-right: 1px solid gray;
}
div.nav li:hover {
background: #db5826; /* Old browsers */
background: -moz-linear-gradient(top, #db5826 0%, #ce421e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#db5826), color-stop(100%,#ce421e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #db5826 0%,#ce421e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #db5826 0%,#ce421e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #db5826 0%,#ce421e 100%); /* IE10+ */
background: linear-gradient(to bottom, #db5826 0%,#ce421e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db5826', endColorstr='#ce421e',GradientType=0 ); /* IE6-9 */
}
div.nav li:hover a {
font-weight:400;
text-decoration:none;
}
div.nav ul li:hover ul { visibility: visible; opacity: 1;
transition:opacity 0.2s ease-in;
}
div.nav ul li ul {
position:absolute;
top:100%; z-index: 101; visibility: hidden; opacity: 0;
}
div.nav ul li ul li {
text-align:center;
width:252px;
display:block;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#dddddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
border:0;
border-top: 1px solid #ddd;
}
div.nav ul li a {
font-size: 1.15em;
font-weight:300;
color:#eee;
padding:3px;
}
div.nav ul li ul li a {
font-size: 0.9em;
color:#7a6658;
}
div.nav ul li ul li:hover a {
text-decoration:none;
color:#eee;
font-weight:700;
}
/*----------------------------*/
div.nav-wrapper {
position: relative;
z-index: 0;
margin:0 10px;
}
div.nav-container { position: relative; overflow: hidden; margin: 0 auto; width: 980px; height: 630px;
z-index:10;
}
div.nav-container a {
text-decoration:none;
display:block;
}
/*
div.nav-container div.nav {
margin-top:385px;
}
*/
.nav-container img { position: absolute; top: 0; left: 0; z-index: -60; width:980px;
height:425px;
}
.nav-container li img { position: absolute; /* top: -385px;*/ top:0;
left:0; z-index: -50;
opacity:0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
.nav a:hover ~ img {
opacity:1;
}
body.front div.nav ul li ul li {
width:244px;
}
Dropdown menu with image change on hover - Script Codes
Dropdown menu with image change on hover - Script Codes
Home Page Home
Developer Shannon Range
Username silentkrange
Uploaded November 10, 2022
Rating 3
Size 2,747 Kb
Views 22,264
Do you need developer help for Dropdown menu with image change on hover?

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!

Shannon Range (silentkrange) Script Codes
Name
Countdown to Vineyard
Ask New Questions
Hover.css
Count up with commas
A Pen by Shannon Range
Drawing svg line with Lazy Line Painter
Take Action talk bubbles with SVG
D3 line chart 2
Powerball Odds
700 Synapses Per Second
Create amazing love letters 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!