I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?
Wrap your image in a <div class="thumb">
Add position: relative to .thumb.
Add <div class="text> inside .thumb.
Add display: none; position: absolute; bottom: 0 to .text.
Use .thumb:hover .text { display: block } to make the text visible on hover.
Like this: http://jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.
Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.
Wrap it in an element and do something like this:
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/
Here's an example. You can position the text however you want, but the basic principle below.
http://jsfiddle.net/Xrvha/
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}
If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});
2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.
Related
I am trying to make a situation when you hover over an image then it will hide an image and show another. and the other way around when you hover out.
I have tried using all the various hover effects that comes to mind like mouseenter, mouseover, hover, etc.
They all cause the same problem. If i very firmly and quickly drag my cursor into the field of action then it will give me the desired effect. however if i slowly drag my cursor into the field of action then it will jump between the images a couple of times before finally stopping at the correct image.
this looks very unprofessional and i want it to be much more consequent doing this action so that no matter if i do it slow or fast then it will only jump once.
this is my script:
$("#DenmarkMap").hide();
$("#InfoBadge1").hover(function(){
$("#InfoLogo").hide("puff");
$("#DenmarkMap").show("puff");
}, function(){
$("#DenmarkMap").hide("puff");
$("#InfoLogo").show("puff");
});
this is a non working fiddle
https://jsfiddle.net/ydeLvxx2/
hope you guys can help me figure this out.
Here is a pure Javascript solution (no jQuery needed)
https://jsfiddle.net/uL0hpxbu/
Update: version with CSS3 "puff" effect: https://jsfiddle.net/230ta4tk/2/
Here is how the main script looks like:
var InfoBadge1 = document.getElementById("InfoBadge1");
var InfoLogo = document.getElementById("InfoLogo");
var DenmarkMap = document.getElementById("DenmarkMap");
InfoBadge1.addEventListener("mouseover", function() {
InfoLogo.classList.toggle("puff");
DenmarkMap.classList.toggle("puff");
});
InfoBadge1.addEventListener("mouseout", function() {
InfoLogo.classList.toggle("puff");
DenmarkMap.classList.toggle("puff");
});
and CSS part (just an example, change it as you want)
#DenmarkMap {
position: absolute;
left: 0;
top: 0;
transition: .5s all;
}
#InfoLogo {
position: absolute;
left: 250px;
top: 120px;
transition: .5s all;
}
#InfoBadge1 {
position: absolute;
left: 0px;
top: 120px;
}
.puff {
transform: scale(1.2);
opacity: 0;
}
and HTML:
<img id="InfoBadge1" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoBadge1" alt="" />
<img id="InfoLogo" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoLogo" alt="" />
<img id="DenmarkMap" class="puff" src="http://dummyimage.com/200x100/3c8036/ffffff&text=DenmarkMap" alt="" />
You should not bind your hover's mouseleave/mouseout event to the same image, because you've just hidden it.
Instead, consider binding the hover functions to the parent DOM node (a DIV for example):
<div id="images">
<img id="InfoBadge1" src="./Photos/DenmarkInfoBadge.png">
<img id="InfoLogo" src="./Photos/InfoLogo.png">
<img id="DenmarkMap" src="./Photos/DenmarkMap.png">
</div>
Your javascript can then become:
$("#DenmarkMap").hide();
$("#images").hover(function(){
$("#InfoLogo").hide("puff");
$("#DenmarkMap").show("puff");
}, function(){
$("#DenmarkMap").hide("puff");
$("#InfoLogo").show("puff");
});
I'm at a point where I've tried every other option, but I can't seem to solve this problem. Here's an explanation of the experience:
When visiting the page, the person is introduced to a number of images (tagged with classes, for example two of the images are tagged img01 and img02). When an image is clicked, the image maintains it's place (img01's z-index is risen) while all the other images fade away (DIV with a white fill fades in and covers img02), and a text that explains the piece fades in as well (DIV tagged object-text with img01's supporting text fades in).
While I got the img01 functionality to work, I can't seem to do the same for img02. I'm also planning on adding more tags (such as img03 and img04) and am wondering if there is a smarter, more effective way this can be structured.
For functionality reference, here's a http://jsfiddle.net/kenhimself/nvwzgus0/4/
Below, is the html, css, and the java code.
Thanks in advance!
html
<img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
<div id="object-text" class="img01">
<h1>img01 Text<br/>img01 Text</h1>
</div>
<img class="img02" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
<div id="object-text" class="img02">
<h1>img02 Text<br/>img02 Text</h1>
</div>
<div id="filler"></div>
CSS
html, body {
width:100%;
height:100%;
}
#object {
top: 100px;
left:100px;
}
#object-text {
display:none;
z-index:100000;
bottom: 0;
left: 0;
}
#filler {
display:none;
width:100%;
height:100%;
position:fixed;
background-color: white;
z-index:1000;
opacity: 0.8;
}
h1 {
font-size:20px;
font-family: sans-serif;
font-weight: 100;
font-style: normal;
color: red;
}
.img01, .img02 {
position:absolute;
}
.img01 img, .img02 img {
width:200px;
height:auto;
}
.img01 {
top: 20px;
left: 20px;
}
.img02 {
top: 20px;
right: 20px;
}
Javascript
$("#object").click(function (e) {
e.stopPropagation();
});
$("#object").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#object").css("z-index", "2000");
$("#object-text").fadeIn("slow");
$("#filler").fadeIn("slow");
$("#inner").css("z-index", "2000");
});
$(document).click(function () {
$("#filler").fadeOut("slow");
$("#object-text").fadeOut("slow");
});
There are a few issues with your code. You should be using unique ID's for each DOM element, and targeting your images by class name. I've made a few changes to your example and restructured it slightly to show you a better approach.
http://jsfiddle.net/nvwzgus0/6/
Wrapped each image in a containing tag, removed duplicate ID's and using class names instead
<a href="#" class="img img01">
<img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
<div class="object-text">
<h1>img01 Text<br/>img01 Text</h1>
</div>
</a>
<a href="#" class="img img02">
<img class="img02" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
<div class="object-text">
<h1>img02 Text<br/>img02 Text</h1>
</div>
</a>
<div id="filler"></div>
Added CSS class for changing z-index instead of setting it manually, to make it easier to toggle on and off.
a.top {
z-index: 2000;
}
Modified event handling to target new containing tag:
$("a.img").click(function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("top");
$(this).find(".object-text").fadeIn("slow");
$("#filler").fadeIn("slow");
});
Modified how images z-index is reset:
$(document).click(function () {
$("#filler").fadeOut("slow", function() {
$("a.img").removeClass("top");
});
$(".object-text").fadeOut("slow");
});
The main problem I see here is that you have two objects with the same id. Change this, and your code should work. I would recommend switching what you have as ids (object) to classes, and what you have as classes (img02 and img01) to ids.
I looked over your code some more and it seems you are doing this a lot. Make sure that when you code you NEVER reuse ids...like ever. Both your a's and your divs have duplicate ids....
Not to be mean, but this does need a lot of work. Feel free to ask any questions if you need more help.
I made a div which has a background image of a face, I have designed div which contains a paragraph, 2 buttons and an input box.
I know this question has been asked quite often however my situation is different, I'd like for my div with the background image of a face to be clickable so that the div containing everything else slides out from the left.
What is the best method to do this?
HTML
<div id="image"></div>
<div id="container">
<p>I like nutella and croissants</p>
<input id="message" placeholder="type...." required="required" autofocus>
<button type="button" id="send">Send</button>
<button type="button" id="close">Close</button>
</div>
CSS
div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }
JQUERY
$(document).ready(function(){
$( "#image" ).click(function() {
jQuery(this).find("#container").toggle();
});
});
Using the article link posted by Raimov (which I actually came across in a Google search before realize he posted it as well ;), we can use jQuery to animate the width when the toggling element is clicked. Remember that a background does not add size to an element, so the toggle with the background image must have a height attribute set. Also, if you have long lines of text in the form, you'll have to wrap them yourself or use another method from the article.
http://jsfiddle.net/iansan5653/wp23wrem/ is a demo, and here is the code:
$(document).ready(function () {
$("#image").click(function () {
$("#container").animate({width: 'toggle'});
});
});
and this CSS is necessary:
div#image {
background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
height: 36px;
/*height needed to actually show the div (default width is 100%)*/
}
#container {
white-space: nowrap;
overflow: hidden;
}
I created a jsFiddle for you, where after clicking on img, the form hides to the left.
$("#image").click(function() {
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() : 0
});
The resource was taken from:
Tutorial how to slide elements in different directions.
Lately I've been trying my hand at animation using CSS and jQuery, it went well, however, now I want to do a bit more.
That is, once the user clicks information should show up on top of the image.
At the moment, I just have a few tags on which I perform the animations and class toggles.
My question is, I've thought about doing the following:
<div class= "singleImage">
<img src.... class="actualImage">
<p>text to put over the image</p>
</div>
This would be done per image which means that I'll have about 5 of them with different images.
However, I don't know how to go about selecting the previous element of class "actualImage".
Has anyone got any suggestions?
Thank you
Use the jQuery prev function. Example: Assume you want to select the image previous to the second image:
var foo = $(".singleImage").eq(1);
var bar = $(foo).prev().find('.actualImage');
Fiddle
Try this:
$('singleImage').children('.actualImage').prev();
I'm not sure why you are trying to select the previous element, but you could do something akin to this:
Bind a function to the click event for the element containing your image and caption.
Inside this function, toggle the caption.
Also, bind a click event handler to the body to detect clicks "off" the containing element.
HTML:
<a href="#" class="has-caption">
<img src="http://placehold.it/300x300" />
<span class="caption">This is a caption</span>
</a>
CSS:
a.has-caption { position: relative; }
a.has-caption .caption {
background: rgba(0, 0, 0, .25);
bottom: 0;
color: #fff;
display: none;
height: 20px;
left: 0;
line-height: 20px;
position: absolute;
width: 100%;
}
a.has-caption img { vertical-align: bottom }
JavaScript
$('a.has-caption').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
var self = $(this)
, tmpId = 'toggle-' + Date.now();
self.addClass(tmpId);
$('span.caption', self).toggle();
$('body').one('click', function(e) {
if (!$(event.target).closest('.' + tmpId).length) {
$('span.caption', '.' + tmpId).hide();
self.removeClass(tmpId);
};
});
});
http://jsfiddle.net/83s7W/
+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?