I'm trying to update a background-image on the body element of a page, when I hover links with data-* attributes. It works like a charm but I can't find a way to create a smooth fade between the images when a link is hovered. Here is my code :
$(document).ready(function(){
$('.link').hover(
function() {
var bg = $(this).data('fond');
// alert(bg);
$('body').css("backgroundImage", 'url(' + bg + ')');
},
function () {
$('body').css("backgroundImage", 'url(http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg)');
}
);
});
body {
margin:0;
background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
background-repeat: no-repeat;
background-size: cover;
transition: all 1s;
}
header {
width: 50%;
margin: 50px auto;
}
h1 {
text-align: center;
}
nav {
position: absolute;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
nav ul {
padding: 50px;
background-color: rgba(0, 0, 0, 0.95);
}
nav ul li {
display: inline-block;
padding: 0 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
<header>
<h1>Hover a link, bro</h1>
</header>
<!-- Main -->
<main>
<nav class="main-nav">
<ul>
<li data-fond ="img/belharra.jpg" class="link">Belharra</li>
<li data-fond ="img/jaws.jpg" class="link">Jaws</li>
<li data-fond ="img/mavericks.jpg" class="link">Mavericks</li>
<li data-fond ="img/nazare.jpg" class="link">Nazare</li>
<li data-fond ="img/teahupoo.jpg" class="link">Teahuppo</li>
</ul>
</nav>
</main>
Bonus: Someone can explain to me why I had to use a second function when the mouse leave a link to give the body the original background image? I thought the .hover() method automatically put a toggle on the targeted element...
The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.
Thanks a lot for the help !
I don't think this can be done with a smooth fade effect.
A better way to achieve this is to put all your images in a div container in your html. All your images need to have a css opacity property to 0. In this way, you can easily change the opacity property beetween your images and have your smooth fade effect.
body {
margin:0;
background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
background-repeat: no-repeat;
background-size: cover;
transition: all 1s;
}
please change your url link url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
it is not correct
you can try your jquery like this.
$('body').fadeOut(1000).css("your code").fadeIn(1000);
following html,I have created to get an idea.think this may help to you.just copy and try it.
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
.myimage{
width:500px;
height: 500px;
overflow: hidden;
}
.myimage img{
width: 100%;
height: 100%;
}
</style>
<body>
<div class="myimage">
<img id="one" src="http://www.estero.co.nz/new/wp-content/uploads/2014/03/45901_new-zealand.jpg"/>
<img id="two" src="http://www.timeforkids.com/files/styles/tfk_rect_large/public/2011-07/nz_ss5.jpg?itok=0m-TtEYy"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#one").mouseenter(function(){
$(this).fadeOut(1000);
});
});
</script>
</body>
</html>
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'm trying to use JQuery UI's slide animation to toggle a div.
When a link is clicked, the div slide in the page from the right (as seen in this fiddle).
$("#toggle").click(function(event) {
event.stopPropagation();
$("#slider").toggle("slide", {
direction: "right"
}, 300);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
z-index: 100;
display: none;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous">
</script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
The problem I have is this scrollbar that appears during the animation, I don't want it to be displayed, like in JQuery UI's website, they don't have this scrollbar issue and I don't know how they did it.
I would like to avoid wrapping #slider into another container if possible, and I can't set his parent to overflow: hidden neither at the moment.
Is there a simple way to fix this ?
The easiest solution is to set overflow: hidden on the body element. However, since you said that you can't do that, an alternative solution would be to animate the width of the element in order to make it appear like it is sliding in. In reality the width of the element is just increasing/decreasing from 0 and it is animated to make it look like it is sliding.
In jQuery you would do this with the .animate() method and you would set the value of width property to 'toggle'.
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
In addition, you can also prevent the text from wrapping with white-space: nowrap.
See the full example below:
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
white-space: nowrap;
z-index: 100;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
I am creating a portfolio for the freecodecamp course. I want my portfolio page to have a slide out navigation menu, that slides out once you click on the menu button. I also want to have an image covering the body completely and when the menu slides into the page the picture would move with the body. I already have the slide out menu and the body moves along with the menu as it slides into the viewport, now I just need to figure out a way to add an image to the body that also responds to the slide out menu. Any help would be greatly appreciated!
This is my HTML and JS code that I have written so far.
<!DOCTYTPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="menu menu-open">
<header>
Menu
<nav class="menu-side">
This is a side menu
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
(function() {
var body = $('body');
$('.menu-toggle') .bind('click', function(){
body.toggleClass('menu-open');
return false;
});
})();
$(document).ready(function(){
$(".menu").css({"height":$(window).height() + "px"});
});
</script>
</body>
</html>
This is my CSS.
.menu{
overflow-x: hidden;
position: relative;
left:0;
}
.menu-open{
left:231px;
}
.menu-open .menu-side{
left: 0;
}
.menu-side,
.menu{
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side{
background-color: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left:-231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu-toggle{
z-index: 1;
}
I think all you need to do is add a background image to the class you add to the body when the menu is open if I understand the question correctly.
.menu-open {
background-image: url('your-image.jpg');
}
You can simply add a div into a body (so you can have more flexibility to manipulate with the content):
<body>
<nav></nav>
<div>
<p>Menu</p>
</div>
</body>
Then use CSS to fill the window with the background and set style of your navigation:
html,
body {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100vh; /* Relative to 100% of the height of the viewport (browser
automatically recognizes height of the window) */
box-sizing: border-box;
}
/* Adjust body size to the html */
body {
width: 100%;
height: 100%;
display: flex;
}
nav {
width: 200px;
height: 100%;
}
div {
width: 100%;
height: 100%;
/* Background resizes automatically when menu appears */
background-image: url('yourimage.jpg');
background-size: cover;
background-repeat: no-repeat;
}
And animate navigation with jQuery:
$("p").click(function() {
$("nav").animate({width:'toggle'}, 350);
});
I'm trying to create a Side menu for my responsive website. I'm not that good with JavaScript but it is working! (so far)
My problem is that, I'm toggling the <nav> class to make it appear and dissapear from the left side. The button to click is outside the <nav> content and the button to close is a simple text inside the <nav> content.
So, my HTML looks like this:
<nav id="nav-slide" class="nav-slide">
Side Content <br>
Close
</nav>
That's the nav that I'm trying to Toggle. The button to open should be this image:
<img id="menu-icon" src="images/menu-icon.svg"/>
CSS:
.nav-slide {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background-color: #3f3f3f;
z-index: 99;
box-sizing: border-box;
padding: 20px;
color:#fff;
margin-left: -100%;
transition: margin 200ms ease-in-out;
}
.nav-open {
margin-left: 0px;
transition: margin 200ms ease-in-out;
}
and my JAVASCRIPT:
$("#menu-icon").click(function(){
$("#nav-slide").toggleClass("nav-open");
});
$("#close-button").click(function(){
$("#nav-slide").toggleClass("nav-slide");
});
Is working so far! But when I click on Close text, and after closing the <nav> it keeps displaying <nav> content like this image:
Image with example of problem
Any way to solve this?
JQuerys toggleClass does add a new class to an item. If it already has that class, it will remove it from that item. So while your nav's base class is nav-slide, toggle nav-open only (not both). Here's a slightly different, basic example of an animated side-nav:
$('button').on('click', function (e) {
$('.menu').toggleClass('open');
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 20%;
background-color: tomato;
transform: translate(-100%, 0);
transition: transform 1s;
}
.menu.open {
transform: translate(0, 0);
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<button>menu</button>
<div class="menu">
<button>close</button>
</div>
Edit: Here is a pen of your example:
http://codepen.io/wilmaknattern/pen/xZXMaW
I'm trying to change one image to another on mouseover. Specifically, when the visitor hovers over this:
The image will change to this:
The Current Code
I'd like to do this as lightweight as possible. But the image-background CSS thing doesn't work for me. My code is as follows:
<div id="featured-box-right"><a href="/videos/"
target="_self"><img src="../images/box-featured-home-right.png" title="videos"
alt="videos" width="300" height="150"></a></div>
But when I do this to the CSS:
#featured-box-right a:hover
{
background-image: url(../images/box-featured-home-right-hover.png);
}
The effect doesn't turn out right; it's not a background. It's an actual image. Any guidance as to how I can achieve this as lightweight as possible would be greatly appreciated!
The lightweight method is to use CSS, and use the property background-image of the div:
jsFiddle
<div id="featured-box-right"></div>
CSS:
#featured-box-right {
width: 300px;
height: 150px;
background-image: url('http://i.stack.imgur.com/OywDf.png');
}
#featured-box-right:hover {
background-image: url('http://i.stack.imgur.com/aRJOk.png');
}
You should use css image sprites techniques and do not use img tag here use css background property. You should try something below. you can use cllass or id or parent child relationship that is totally up to you.
<div id="featured-box-right">
</div>
css:
#img1
{
background: url(../images/box-featured-home-right.png);
}
#img1:hover
{
background: url(../images/box-featured-home-right-hover.png);
}
Remove the <img/> tag altogether and try this css.
#featured-box-right a {
background-image: url(../images/box-featured-home-right.png);
}
#featured-box-right a:hover {
background-image: url(../images/box-featured-home-right-hover.png);
}
CSS Sprites is a technique where you use a background-image, a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up page load times:
HTML:
<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
CSS:
.clip { position: absolute; top: 0; left: 0; }
.pos-1 { clip:rect(0 48px 48px 0); }
.pos-2 { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3 { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4 { clip:rect(48px 96px 96px 48px); top: -48px;
left: -48px; }
Took from here
You can delete the <img> tag and use CSS background iamge method, but you need to combine the 2 pic into one (one on top and one on bottom)
next, you need to use this code:
#featured-box-right {
width: 300px;
height: 150px;
background-image: url(image url here) center top;
}
#featured-box-right:hover {
background-image: url(image url here) center bottom;
}
Using this method makes you need only 1 image
No images (background or otherwise) are required.
This comes out to only 3.84% the size of your two images combined:http://fiddle.jshell.net/gWytK/show/:
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
margin: 8px;
}
#links {
list-style: none;
margin: 0;
padding: 0;
display: block !important;
display: inline-block;
overflow: hidden;
}
#links li {
float: left;
width: 300px;
height: 150px;
overflow: hidden;
background: #000000;
border-radius: 20px;
}
#links a {
display: block;
font: bold 30px/30px 'comic sans ms', sans-serif;
padding: 40px 66px 100px;
color: #5496ff;
text-decoration: none;
text-transform: capitalize;
text-shadow: 0 0 100px #ffffff, 0 0 100px #ffffff;
}
#links a:after {
content: ' >>';
}
#links a:hover,
#links a:focus {
color: #1b1b1b;
background: #5496ff;
text-shadow: none;
}
</style>
</head>
<body>
<ul id="links">
<li>
Our video collection
</li>
</ul>
</body>
</html>
No image property in CSS. In order to get the desired effect you should replace it with background-image and delete the img tag from your HTML code.
#featured-box-right
{
background-image: url(../images/box-featured-home-right.png);
}
#featured-box-right:hover
{
background-image: url(../images/box-featured-home-right-hover.png);
}