So, I want to put image over image. The second to be in up corner.
I want to do that with jQuery.
$("#result").on({
mouseenter:function(){
$("#article").attr("src", "button2.png");
}, ".button");
});
I want when someone hovers to article to show image for SHOW MORE
Like everyone else is saying, you can do it with just CSS. The easiest way to do it I think is to have one image as a background and then just having another image on top:
See JSFiddle
HTML:
<div class="image1">
<img src="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" class="image2"/>
</div>
CSS:
.image1 {
width: 650px;
height: 433px;
background: url("http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg");
}
.image1:hover .image2 {
display: block;
}
.image2 {
display: none;
width: 100px;
height: 80px;
}
==== ALTERNATE SOLUTION ====
If you have to do it with img tags you can use the following:
See JSFiddle
HTML:
<img src="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" class="image1"/>
<img src="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" class="image2"/>
CSS:
.image1 {
position: absolute;
}
.image1:hover + .image2 {
display: block;
}
.image2 {
display: none;
width: 100px;
height: 80px;
position: absolute;
z-index: 100;
}
Related
I need to change background image on normal image hover. (Please don't suggest me to put this into normal background image)
I tried this way using z-index values but it's not working. Here is the fillde It needs to preload image so user don't see image loading at all.
img{
width: 120px;
position: relative;
z-index: -1;
}
img:hover{
background-image: url('https://i.ibb.co/bsQL6SK/media13-3-blue.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">
I checked both images and it appears that you need a bluescale image on hover. IF that's the case, you can use filter:
img {
width: 120px;
}
img:hover {
filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}
Here's a demo: https://jsfiddle.net/lotusgodkk/x2ywL6he/5/
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
For a pure css solution you would have to wrap your image in a div and have the background image on the before/after element. Something like this. I added a background color just to make it more clear what is happening. The solution also depends on what you really want, to me it's a bit unclear.
.container {
width: 120px;
position: relative;
display: inline-block;
}
.container:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
background-image: url('https://cdn.motor1.com/images/mgl/Rzxom/s3/lamborghini-sian-lead.jpg');
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.container:hover:after {
display: block;
}
.container img {
width: 100%;
height: 100%;
}
<div class="container">
<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">
</div>
EDIT
As you can see the fox news logo is that small but your image is larger, I added the green background to make it more clear (was transparent before). What you need to do is to edit so the logo is full size. Does it make sense?
html
<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" onmouseover="this.src='https://i.ibb.co/bsQL6SK/media13-3-blue.png'" onmouseout="this.src='https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png'" alt="">
css
img{
width: 120px;
}
working demo
let me know if you still face issue.
You can achieve it by using onmouseover and onmouseout.
img{
width: 120px;
position: relative;
}
<img src='https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png' onmouseover="this.src='https://i.ibb.co/bsQL6SK/media13-3-blue.png';" onmouseout="this.src='https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png';" />
You can use two image tags, hide one by default and toggle display of these on hover. Something like this?
const c = document.querySelector("#container");
const img1 = document.querySelector("#container .off-hover");
const img2 = document.querySelector("#container .on-hover");
c.addEventListener("mouseover", function(){
img1.style.display = "none";
img2.style.display = "inline-block";
})
c.addEventListener("mouseout", function(){
img1.style.display = "inline-block";
img2.style.display = "none";
})
img{
width: 120px;
position: relative;
}
.on-hover {
display: none;
}
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="off-hover" alt="">
<img src="https://cdn2.downdetector.com/static/uploads/logo/Google-new_19.png" class="on-hover">
</div>
you can use jquery hover event and change the image URL and change your z-index to 0 till user can hover it
<html>
<head>
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">
</body>
<style>
img{
width: 120px;
position: relative;
z-index: 0;
}
img:hover{
background-image: img[back];
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script>
$('img').hover(function (e) {
if(e.type == 'mouseenter'){
$(this).attr('src', 'https://i.ibb.co/bsQL6SK/media13-3-blue.png');
}else{
$(this).attr('src', 'https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png');
}
});
</script>
</html>
I slightly do not get what you meant by (Please don't suggest me to put this into normal background image), pardon me if I misunderstood and do the exact thing you wanted to ignore.
Without using JavaScript and just with plain CSS I can see two approaches( I am a beginner)
Using both the image as background images in CSS and showing/hiding accordingly, but this is not what you wanted.
Using both the images in HTML with img tag, you can wrap it with tag or even a div.
But make sure both the image have same dimension
img{
width: 200px;
}
a img:last-child {
width: 200px;
display: none;
}
a:hover img:last-child {
width: 200px;
display: block;
}
a:hover img:first-child {
width: 200px;
display: none;
}
<a>
<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">
<img src="https://i.ibb.co/bsQL6SK/media13-3-blue.png" alt="">
</a>
I am trying to create some options that are hidden unless the user goes with the mouse in a specific area. Let's take an example: Google+ profile page:
When you go with the mouse cursor on the picture, the button appears.
Here is what I tried:
var $button = $("#button");
$("#profile-picture").on("mouseover", function() {
$button.show();
}).on("mouseout", function() {
$button.hide();
});
#profile-picture {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 45px;
left: 70px;
opacity: 0.75;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
The problem is that when I go with the cursor over the #button, it flickers. What can I do?
The easiest method is placing them both in the same div, and then using mouseover/out for that div. Example: http://jsfiddle.net/1g24mhhz/
HTML:
<div id="profile-picture">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" class="profile">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
CSS edits:
#profile-picture .profile {
width: 150px;
height: 100px;
}
EDIT: You should probably not use an ID for the div, since you probably have multiple profiles on a page. This was just to show it with the code you had already used.
A simple css approach. You can have a click event on the button :)
$('#button').on('click', function() {
alert('I am clickable');
});
#profile-picture,
.hover-wrap {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
bottom: 0;
right: 0;
margin: auto;
opacity: 0.75;
cursor: pointer;
}
.hover-wrap {
position: relative;
}
.hover-wrap:hover #button {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="hover-wrap">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
You can use CSS:hover properties to show/hide the button, no Javascript needed.
The trick is a sibling selector:
#profile-picture:hover + #button, #button:hover{
display:block;
}
Try this:
http://jsfiddle.net/6s9200ab/
Please have a look at this:
http://liveweave.com/5bhHAi
If you click the "Get Pos" link you will see the red div's position relative to the image.
Now say this image's size has changed at some point down the line. How can I get the new position for the red div based on the initial data?
HTML:
<div id="watermark"></div>
<img src="http://placekitten.com/g/320/270" class="small-img">
<div><br><br>Get Pos</div>
jQuery:
$(document).ready(function() {
var $watermark = $('#watermark');
$('.get-pos').on('click', function(e) {
e.preventDefault();
var watermark_position = {
top: $watermark.position().top - $('.small-img').position().top,
left: $watermark.position().left - $('.small-img').position().left
};
alert(watermark_position.top + 'px from the top');
alert(watermark_position.left + 'px from the left');
});
});
CSS:
#watermark { background: red; position: absolute; top: 215px; left: 265px; width: 50px; height: 50px; }
Here is a solution to what I understand you want from question/comments:
http://jsfiddle.net/tXT2d/
var imgPos = $(".image img").offset();
var wmPos_tmp = $(".watermark").offset();
var watermarkPosition = {
top: wmPos_tmp.top - imgPos.top,
left: wmPos_tmp.left - imgPos.left
}
You can accomplish your intended goal (placing the watermark at the right place even after size changes) without using javascript at all if you do just a little reworking. A working example of the following solution is here
(just change the width of the .img-container to see it function).:
.watermark {
background: red;
width: 50px;
height: 50px;
}
.img-container {
width: 295px;
height: auto;
position: relative;
}
.img-container img {
width: 100%;
}
.img-container .watermark {
position: absolute;
right: 10px;
bottom: 10px;
}
<div class="img-container">
<div class="watermark"></div>
<img src="http://placekitten.com/g/320/270" class="small-img">
</div>
Your html containing the image will look basically like this:
<div class="img-container">
<div class="watermark"></div>
<img src="http://placekitten.com/g/320/270" class="small-img">
</div>
And the css to get the placement to happen looks like this:
.watermark { background: red; width: 50px; height: 50px; }
.img-container {
width: 275px;
height: auto;
position: relative;
}
.img-container img {
width: 100%;
}
.img-container .watermark {
position: absolute;
right: 10px;
bottom: 10px;
}
Here, the image will always match the width of its container, and the watermark will always place itself ten pixels from the right and ten pixels from the bottom of the container.
What I am doing wrong?
When you click on class divtop, it should show a div popup in the middle of the page. At that time back page should become not clickable. escape or a button in popup will close it.
<html lang="en" class=" en">
<head>
<title>My Test Popup</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.divtop
{
width: 800px;
height: 300px;
border:solid;
}
.divbottom
{
top: 400px;
}
.localmenu {
border: 1px solid black;
background: #fff;
margin-left : auto;
top: 50px; width: 300px;
padding-top: 25px;
margin-top: 100px;
height: 150px;
}
.appContent{
width: 800px;
border:solid;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.maincontent{
width: 100%;
}
</style>
</head>
<body>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
<div id="popup" style="width : 100%; height: 600px;display: none;">
<div class='localmenu'>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().css("top", "500px").animate({top: 50}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
});
});
</script>
</body>
</html>
Fiddle
I added some CSS to your #popup and it's now all in the CSS (not inline in the html). Changed also your jQuery animate to 50px, instead of just 50.
I think you have small adjustments to do to the CSS, like in .localmenu I'm not sure why you have both padding-top: 25px; margin-top: 100px;.
CSS
#popup {
position:absolute;
display: none;
float: left;
left:30%;
z-index:1;
}
#popoverlay {
position: fixed;
display:none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
jQuery
$(document).ready(function () {
$('.divtop').click(function () {
$('#popoverlay').show();
$('#popup').show().css("top", "500px").animate({
top: "50px"
}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function () {
$('#popup').hide();
$('#popoverlay').hide();
});
});
HTML
<div class="appContent">
<div class="maincontent">
<div class="divtop">Top</div>
<div class="divtop divbottom">Bottom</div>
</div>
<div id="popup">
<div class='localmenu'>Text in Div Popup
<br/>
<button id="btnHide">Close</button>
<br/>
</div>
</div>
</div>
To get it to work properly, even if there is a vertical scroll bar, you have to use position "fixed". Place popup as a direct child of body and make it's position: fixed, and width and height 100%. Place localmenu as a direct child of body as well. Working example at jsbin.
Html:
<div id="popup">
<!--// This is to stop the user from interacting with the content in the back
// and to give a visual clue about that
-->
</div>
<div class='localmenu'>
<div>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
</div>
CSS:
//Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
#popup {
position: fixed;
width: 100%;
height: 100%;
display: none;
background: black;
opacity: .5;
top: 0;
left: 0;
}
//This is just to be able to center the actual menu
.localmenu {
top: 20%;
left: 0;
width: 100%;
position: fixed;
height: 150px;
display: none;
}
.localmenu > div {
border: 1px solid blue;
background: #fff;
margin-left : auto;
margin-right: auto;
width: 300px;
height: 150px;
}
Javascript: (This is mostly the same, although I removed the animate, because I don't know exactly how it works and it needs to end at 'top: 0'. As localmenu and popup are seperate, we show them seperate as well.)
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().animate(200);
$('.localmenu').show();
//$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
$('.localmenu').hide();
});
});
To block the div tags at the back from being clickable:
Add a div with the following style in your HTML. Im gonna call it overlay.
.overlay {
width: 100%;
height: 100%;
background-color: #000;
left: 0;
opacity: .8;
position: absolute;
top: 0;
z-index: 10000;
display: none;
}
This will essentially cover up your page when shown up.
To center your popup:
I added some extra styles to #popup and removed some from .localmenu. You were missing position: absolute and z-index, added those in. (z-index of popup must be > z-index of overlay)
#popup {
background: #fff;
position :absolute;
left : 40%;
width : 300px;
height: 600px;
height: 150px;
display: none;
z-index: 10001;
}
.localmenu
{
border: 1px solid black;
}
Then, in your JS,
In your animate method, I changed 50px to 30% to center div#popup
Added code to hide and show .overlay along with #popup.
After the changes,
$(document).ready(function () {
$('.divtop').click(function () {
$('#popup').show().css("top", "500px").animate({
top: "30%"
}, 200);
$('.overlay').show();
});
$('#btnHide').click(function () {
$('#popup,.overlay').hide();
});
});
Demo
http://jsbin.com/olasog/1
Code
http://jsbin.com/olasog/1/edit
Try this:
$(document).ready(function() {
$('.divtop').click(function() {
var div = $('.appContent');
$('.localmenu').css({'margin': '200px auto'});
$('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('.mainContent').css("background-color", "");
$('#popup').hide();
});
});
I am using an iframe now i want to have a button inside the iframe on top right which will display only on mouse over. How can i add this button? Can anyone please help me into the right direction.
jQuery
$(function() {
var close = $('#close');
$('#frame').hover(function() {
close.show();
}, function() {
close.hide();
});
});
HTML
<div id="frame">
<iframe src="http://example.com"></iframe>
<div id="close">Close</div>
</div>
CSS
#frame {
width: 400px;
height: 300px;
position: relative;
}
#frame iframe {
width: 100%;
height: 100%;
}
#close {
display: none;
position: absolute;
top: 0;
right: 0;
border: 1px solid red;
background: #fff;
padding: 5px;
}
jsFiddle.
Keep in mind this obscures a portion of the iframe. It would be a better idea to not do this.