I'm trying to swap an image logo with text on mouse hover.
I have been looking at jquery and css to create this transition, but I haven't been lucky with finding a solution. Hopefully you can help me out a bit.
This is what I'm stuck with.
Example
http://jsfiddle.net/VugzA/
HTML
<div id="logo">
<ul>
<li>
<a href="#home" title="Back to Home?">
<span class="logo_icon">
<img src="some.gif" alt="Logo image" width="45" height="55" />
</span>
<span class="text">Some Text</span>
</a>
</li>
</ul>
</div>
CSS
#logo ul {
list-style: none;
margin-left: -20px;
}
.logo_icon {
display: block;
}
.logo_icon:hover {
display: none;
}
.text {
display: none;
}
.logo_icon:hover + .text {
display: block
}
Here is an update to your fiddle
Updated html:
<div id="logo">
<a href="#home" title="Back to Home?">
<span class="logo_icon">
<img src="some.gif" alt="Logo image" width="45" height="55" />
</span>
<span class="text">Some Text</span>
</a>
</div>
and updated css:
.logo_icon {
display: block;
}
.text {
display: none;
}
#logo a:hover .logo_icon
{
display:none;
}
#logo a:hover .text
{
display:block;
}
What i do here is tie the hover event on the link instead of like you did (hover on image and text), and the image and text span are children of that element. So, when you hover on the link, the specific styles apply.
Related
I am new to HTML, CSS, and Javascript. For some time I have been looking to design my website the same as Harvard school of design but after a lot of search over the internet, I can only find this result change links with images
$('#thumbs img').hover(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
$('#thumbs2 a').hover(function(){
$('#largeImage2').attr('src',$(this).attr('href').replace('thumb','large'));
});
$('#thumbs3 a').hover(function(){
$('#largeImage3').attr('src',this.getAttribute('data-swap'));
});
#thumbs ,#thumbs2, #thumbs3 {overflow: hidden; }
#thumbs img, #largeImage, #largeImage2 ,#largeImage3
{ border: 1px solid gray; padding: 4px; background-color: white; cursor: pointer; }
#thumbs img ,#thumbs2 a ,#thumbs3 a{ float: left; margin-right: 6px; }
#panel { position: relative; }
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
//WITH IMAGE LINKS </br><hr></br>
<div id="gallery">
<div id="panel">
<img id="largeImage" src="http://placehold.it/100" />
<div id="description">main image with image links</div>
</div>
<div id="thumbs">
<img src="http://placehold.it/100/ee55ee" alt="1st image description" />
<img src="http://placehold.it/100/080" alt="2nd image description" />
<img src="http://placehold.it/100/ff6" alt="3rd image description" />
<img src="http://placehold.it/100/ff3322" alt="4th image description" />
</div>
</div>
</br><hr></br>
//WITH SIMPLE LIVE LINKS </br></br>
<div id="gallery2">
<div id="panel">
<img id="largeImage2" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs2">
<a href="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
</br><hr></br>
//WITH SIMPLE [DISABLED] LINKS </br></br>
<div id="gallery3">
<div id="panel">
<img id="largeImage3" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs3">
<a href="#" data-swap="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
which is not much desired. The result which I got on this website is really I am looking forward to the time being. Being new to front-end technologies facing a hard time achieving this goal. I would really appreciate getting help.
Having looked at the code referenced in the question, I wonder whether something a bit simpler would suffice.
In particular, there doesn't really seem to be a need for jquery and it's probably useful to get a basic understanding of 'raw' Javascript before taking on a library.
This snippet has very minimal styling deliberately, just to show the basic JS.
UPDATE To make the transition to the hovered element smoother all images are loaded to begin with. They are stored in the bigImage element so it will be possible to show them offset and transition them in and out as desired using CSS. This code is just the basic stuff needed to show an image on a hover event.
<!-- begin snippet: js hide: false console: true babel: false -->
#container div.bigImage {
display: inline-block;
}
.bigImage img {
display: none;
}
#container ul {
list-style: none;
width: auto;
float: left;
margin: 2vw;
}
#container ul li {
width: auto;
}
#container ul li a {
text-decoration: none;
}
.bigImage img.show {
display: block;
}
<div id="container">
<ul id="ul">
<li>Pic 1</li>
<li>Pic 2</li>
<li>Pic 3</li>
<li>Pic 4</li>
</ul>
<div class="bigImage">
<img src="https://picsum.photos/id/1/300/300.jpg" class="show">
<img src="https://picsum.photos/id/2/300/300.jpg">
<img src="https://picsum.photos/id/3/300/300.jpg">
<img src="https://picsum.photos/id/4/300/300.jpg">
</div>
</div>
const bigImage = document.querySelector("#container div.bigImage"); //get the bigImage element
const img = bigImage.querySelector("img"); // get the img element within it
const textdiv = bigImage.querySelector("div.text"); //get the div which holds the text
const lis = document.querySelector("#container ul").getElementsByTagName("li"); //get a collection of the li elements inside the ul element
// listen for mouseover event on the li elements
for (var i=0; i<lis.length; i++) {
lis[i].addEventListener('mouseover', function() {
// on an event this will refer to the element that witnessed that event
img.src = this.getAttribute("data-src");
textdiv.innerHTML = this.getAttribute("data-text");
}
);
}
// initialise the bigImage with the image and text from the first list element
bigImage.querySelector("img").src = lis[0].getAttribute("data-src");
bigImage.querySelector("div").innerHTML = lis[0].getAttribute("data-text");
#container div.bigImage {
display: inline-block;
}
#container ul {
list-style: none;
width: auto;
float: left;
margin: 2vw;
}
#container ul li {
width: auto;
}
#container ul li a {
text-decoration: none;
}
<div id="container">
<ul>
<li data-src="https://picsum.photos/id/1/300/300.jpg" data-text="Picture 1">Pic 1</li>
<li data-src="https://picsum.photos/id/2/300/300.jpg" data-text="Picture 2">Pic 2</li>
<li data-src="https://picsum.photos/id/3/300/300.jpg" data-text="Picture 3">Pic 3</li>
<li data-src="https://picsum.photos/id/4/300/300.jpg" data-text="Picture 4">Pic 4</li>
</ul>
<div class="bigImage">
<img src="">
<div class="text">
</div>
</div>
if hover on the button tag, it 'll show the social buttons with spaces.
When I mouse over in the space between two social icons, the follo.w button flickers for a moment We should not show follow button if I move even in between icons.
<div class="visible-lg visible-md">
<button class="btn follow-btn text-center" onmouseover="$(this).hide().next().show();">Follow Benedict on social media</button>
<div class="social-btn text-center" onmouseout="$(this).hide().prev().show();">
<a class="btn" href="https://twitter.com/BenedictEvans" target="_blank">
<img src="/assets/new_home/influential-images/Icons/twitter.png" width="100%" height="100%"/>
</a>
<a class="btn" href="http://ben-evans.com/" target="_blank">
<img src="/assets/new_home/influential-images/Icons/blog.png" width="100%" height="100%"/>
</a>
<a class="btn" href="https://soundcloud.com/a16z" target="_blank">
<img src="/assets/new_home/influential-images/Icons/soundcloud.png" width="100%" height="100%"/>
</a>
<a class="btn" href="http://www.slideshare.net/bge20" target="_blank">
<img src="/assets/new_home/influential-images/Icons/slideshare.png" width="100%" height="100%"/>
</a>
<a class="btn" href="https://www.linkedin.com/in/benedictevans" target="_blank">
<img src="/assets/new_home/influential-images/Icons/linkedin.png" width="100%" height="100%"/>
</a>
</div>
</div>
Added the fiddle here:
http://jsfiddle.net/thangadurai1992/g9rasopd/
you could always use css for this. It works by using a wrapper div and having the hover effect on the parent.
img {
height: 30px;
margin: 20px;
}
button {
height: 30px;
margin-top: 20px;
width: 100%;
position: absolute;
}
.wrapper:hover button {
display: none;
}
.wrapper {
display: inline-block;
position: relative;
}
<div class="wrapper">
<button>Follow Text Here</button>
<img src="http://placekitten.com/g/300/200" />
<img src="http://placekitten.com/g/300/200" />
<img src="http://placekitten.com/g/300/200" />
<img src="http://placekitten.com/g/300/200" />
</div>
Note: The margin used on the button and image tags are for demo only, and can be removed without breaking the functionality.
I have placed the css (to keep it clean) directly onto the img and button tags. In order for you to ensure it only applies to this button / these images, you could select them via class:
.social {
height: 30px;
margin:5px;
}
.follow {
height: 30px;
width: 100%;
margin-top:5px;
position: absolute;
}
.wrapper:hover .follow {
display: none;
}
.wrapper {
display: inline-block;
position: relative;
}
<div class="wrapper">
<button class="follow">Follow Benedict on social media</button>
<img class="social" src="/assets/new_home/influential-images/Icons/twitter.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/blog.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/soundcloud.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/slideshare.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/linkedin.png" />
</div>
You don't need JS on this one.
I just added a container and set an hover.
http://jsfiddle.net/g9rasopd/6/
.social-btn-container:hover .follow-btn{
display: none;
}
.social-btn-container:hover .social-btn{
display: inline-block;
}
This is my first post on Stack Overflow so sorry if I'm not clear in what I'm saying. But basically I'm working on a little school project and it's basically an All About Me site to refresh on what we've learned over the summer. I have tabs on the bottom of the screen for navigation and I have content in the center of the screen. Upon clicking a new tab or scrolling down, I want the corresponding div to slide into where the old content was. I don't have a huge knowledge of JavaScript so I have no idea how to go about doing this. I've been looking at image sliders but those aren't really what I'm looking for. I'm looking for something like this: http://coolcarousels.frebsite.nl/c/8/
This is how it looks right now:
http://i.imgur.com/BqZ78S3.jpg
This is basically all of my HTML so far:
<main class="content-container">
<section class="slider animated fadeInDown">
<div class="intro-content">
<h1>Hi, my name is Brian Hurtado.</h1>
<h3>I enjoy making beautiful and innovative websites.</h3>
</div>
<div class="summer-content">
<h1>This is my text about summer.</h1>
<h3>This is some more text about my summer.</h3>
</div>
<div class="design-content">
<h1>This is some text about web design.</h1>
<h3>This is some more text about web design.</h3>
</div>
<div class="schedule-content">
<h1>This is some text about my schedule.</h1>
<h3>Probably going to put a table in here.</h3>
</div>
<div class="site-content">
<h1>This is some text about what I want to do with the school site.</h1>
<h3>This is some more text about what I want to do with the school site.</h3>
</div>
<div class="goals-content">
<h1>These are my goals that I hope to achieve in the future.</h1>
<h3>I have to think of some goals.</h3>
</div>
</section>
</main>
<nav class="main-nav">
<ul>
<li class="active">
<a href="#">
<span>
<img src="img/home.png">
</span>
<b>Intro</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/summer.png">
</span>
<b>Summer</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/design.png">
</span>
<b>Web Design</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/schedule.png">
</span>
<b>Schedule</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/site.png">
</span>
<b>School Site</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/goals.png">
</span>
<b>Goals</b>
</a>
</li>
</ul>
</nav>
And this is my CSS:
body {
font-family: Lato, sans-serif;
}
.content-container {
width: 100%;
height: 80vh;
text-align: center;
color: black;
font-size: 42px;
}
.slider {
width: 1200px;
height: 300px;
overflow: hidden;
margin: 0 auto;
position: relative;
top:250px;
}
.intro-content h3 {
margin-top: -30px;
}
.main-nav {
position: absolute;
bottom:0;
width: 100%;
background-color: #101518;
}
.main-nav ul {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.main-nav ul li a {
color:white;
text-decoration: none;
}
.main-nav ul li {
display: inline-block;
padding: 15px 35px;
font-size: 20px;
color: white;
-o-transition:.3s ;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.main-nav ul li:not(.active) {
opacity: 0.5;
}
.main-nav ul li:hover {
opacity: 1;
}
.main-nav span {
width: 40px;
height: 40px;
display: block;
margin:0 auto 5px;
}
html {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/landscape.jpg") no-repeat center center;
background-size: cover;
}
What exactly do I need to do from here? I was thinking maybe doing an onclick function that switches the active class so that the non-active class is display:none, but I want it to have a sliding effect. I would really appreciate any help. If you need me to clarify anything please let me know.
You can use a variety of plugins as mentioned by Fabio above, or you might use this code as your starting point - FIDDLE.
Your link to coolcarousels showed it going horizontally, so that's how the fiddle works.
JS
$("#selector a").on("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
},
1200);
});
Attribution is noted in the JS section of the fiddle.
I used a very simple script from this website;
http://jquery.malsup.com/cycle2/
Simply download and include Cycle2 plugin on your page (Make sure you also have the latest version of Jquery) and then declare your slideshow markup. There are loads of demo's on the site which are extremely easy to follow.
Goodluck with your project!
I couldn't think of a better way to word the title, but to the point.
I have my code set up like so:
<li>
<a class="news" href="http://MYLINK">
<span>News</span>
</a>
<ul>
<li class="blog">
<a href="http://MYLINK/">
<span>Blog</span>
</a>
</li>
<li class="news">
<a href="http://MYLINK">
<span>News</span>
</a>
</li>
</ul>
</li>
And each MYLINK has a background-image attached to it.
My CSS:
a.news { display: block; width: 105px height: 28px;
background-image: url(Icons/news.png); }
a.news span { display: none; }
And it will maintain the link and not show the text.
But when I do the same for the li classes blog and news it will not display the text,
but it will also not keep the link. Any help?
Should I be using js/jQuery to make this work properly?
You should specify width and height for links too:
li { width: 105px height: 28px; background-image: url(Icons/news.png); }
li a {display: block; width: 105px height: 28px;}
li a span { display: none; }
I'm looking to overlay an image in the right hand corner on another image using jquery.
Basically I want the 2nd image to appear over the other image in the right hand corner when the user's mouse hovers above the image and then vanish when they stop hovering over it. How would I achieve this with Jquery?
#Senad is quite right, you don't need jQuery for that. However, if you have a more complicated situation and are looking for similar functionality, try:
Wrap them in a containing element. Set the containing element to position:relative
Set the overlay image to position:absolute; top:0; left:0; and style the height and width as you like...then use jQuery to handle the hover event...
HTML:
<div>
<img id="main" src="myimg" />
<img id="overlay" src="myimg"
/></div>
CSS:
div {
position:relative;
}
#main {
width:256px;
div {
position:relative;
}
#main {
width:256px;
height:256px;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
}
Code:
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
See a working example here: http://jsfiddle.net/jsney/10/
You don't need jQuery for that, you can use CSS for that, for example
My Overlay
CSS
a.my-overlay {
background: url('/images/first-image.jpg') no-repeat;
width: 100px;/*width: of image*/;
height: 100px;/*height of image*/;
display: block;
text-indent: -1000px;
overflow: hidden;
}
a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }
This is much easier solution and acceptable for everyone.
Let's assume your first image is wrapped inside a div.
1/ Add another div with a "display:none" style and a class of your choice
2/ On hover load the img (if it hasn't been done before) on the div
3/ slideToggle the div that contain the second image and voila !
$('div .firstImage').hover(function(){
$('.secondImage').slideToggle();
});
Of course, you need to set the proper positioning style to the div containing the second image.
Here's a simple way I did it following thomas's code above.
In my case I wanted to put an overlay (basically a greyed out box with a big plus sign) on an image that shows it's clickable and will enlarge the thumbnail in a lightbox.
I need to do that alot so am using classes not ID's.
My image and overlay image are the same dimensions.
.hide just hides the overlay until the hover function show's it.
I'm not showing the lightbox stuff so it's clearer for this issue.
Notice that a.hoverTrigger wraps the .overlay img as well.
If you don't do that you will get the dreaded flickering effect.
markup:
<div class="merchImg">
<img src="_img/_new-store/item.png" />
<img class="overlay hide" src="_img/_new-store/overlay.png" />
</div>
css:
.merchImg {
position: relative;
}
.merchImg .overlay {
position: absolute;
top:0;
left:0;
}
jquery:
$(".hoverTrigger").mouseenter(function() {
$(this).parent().find('a .overlay').show();
});
$(".hoverTrigger").mouseleave(function() {
$(this).parent().find('a .overlay').hide();
});
We also can achieve this using "jquery.ImageOverlay.js" plugin.
here is example for this.
ASPX Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" />
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.metadata.js"></script>
<script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script>
</head>
<body>
<form id="form1" runat="server">
<h1>
jQuery Image Overlay</h1>
<fieldset>
<legend><b>Without any options : </b></legend>
<ul id="firstGallery" class="image-overlay">
<li><a href="http://www.yahoo.com">
<img alt="Palm Tree" src="Images/palmtree.jpg" />
<div class="caption">
<h3>
Write a Title Here</h3>
<p>
Put a Caption Here</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Iguana" src="Images/iguana.jpg" />
<div class="caption">
<h3>
Another Title</h3>
<p>
click for more info</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Ceynote" src="Images/ceynote.jpg" />
<div class="caption">
<h3>
Just a Title Here</h3>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color,
overlay_speed, overlay_speed_out) : </b></legend>
<ul id="secondGallery" class="image-overlay">
<li><a href="http://www.mozilla.com/">
<img alt="firefox" src="Images/firefox-512-200x200.png" />
<div class="caption">
<h3>
Get Firefox</h3>
</div>
</a></li>
<li><a href="http://www.mozilla.com/">
<img alt="jungle" src="Images/jungle.jpg" />
<div class="caption">
<h3>
Tall Overlay</h3>
<p>
The overlay height is based upon the content it contains</p>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata">
metadata plugin</a> : </b></legend>
<ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }">
<li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/">
<img alt="bamboo" src="Images/bamboo.jpg" />
<div class="caption">
<h3>
Connect to a Lightbox</h3>
<p>
overlay origin is overridden, not animated</p>
</div>
</a></li>
<li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com">
<img alt="Ships" src="Images/josh-ships.jpg" />
<div class="caption">
<h3>
'Ships' by Josh Neal</h3>
<p>
different in/out speeds</p>
</div>
</a></li>
<li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }"
href="http://www.mozilla.com/">
<img alt="cypress" src="Images/cypress.jpg" />
<div class="caption">
<h3>
Digg This!</h3>
<p>
colors, overlay speed overridden, overlay always open</p>
</div>
</a></li>
</ul>
</fieldset>
<script type="text/javascript">
// JavaScript for the Image Overlay galleries.
$("#firstGallery").ImageOverlay();
$("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' });
$("#thirdGallery").ImageOverlay();
</script>
</form>
</body>
</html>
============================================================================
CSS :
.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }
.image-overlay a
{
margin: 9px;
float: left;
background: #fff;
border: solid 2px;
overflow: hidden;
position: relative;
}
.image-overlay img
{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.image-overlay .caption
{
float: left;
position: absolute;
background-color: #000;
width: 100%;
cursor: pointer;
/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
longtime IE abuse of it, so opacity is not offically supported - use at your own risk.
To play it safe, disable overlay opacity in IE. */
/* For Firefox/Opera/Safari/Chrome */
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
margin: 10px 0 10px 2px;
font-size: 20px;
font-weight: bold;
padding: 0 0 0 5px;
}
.image-overlay p
{
text-indent: 0;
margin: 10px;
font-size: 1em;
}
Downloads :
Visit this link to download .js files and images files and live example of implementation in many ways.
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html