I've put together a very basic tab image gallery and am now in the process of styling it, but am having some trouble getting the 'default' thumbnail to load with max opacity. My jQuery is also messing with my hover css. I did try using the focus/active css to set opacity to 1 on click rather than jQuery, but it didn't seem to work.
Desired effect
The page loads and image 1 is shown in the main image frame. The thumbnail for image 1 has full opacity while the other 3 have opacity:0.8. When hovering over an unselected thumbnail, opacity:1. After clicking a thumbnail, the picture in the main frame changes and the opacity of the newly clicked thumbnail is set to 1 (whilst the opacity for image 1 returns to 80%).
Issues
The 'default' thumbnail loads at 80% opacity rather than 1.
If I add the latter 2 lines to my jQuery (shown below) to set opacity on click, the 'hover' effect stops working after something has been clicked.
jQuery(document).ready(function() {
$(".thumbnail").click(function() {
$("#mainimage").attr("src", $(this).attr("src"));
$(".thumbnail").css("opacity", "0.8");
$(this).css("opacity", "1");
});
})
#thumbnails img {
display: inline-block;
width: 20%;
cursor: pointer;
overflow: hidden;
opacity: 0.8;
}
#thumbnails img:hover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id='gallery'>
<div id='panel'>
<img id='mainimage' src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' width=80% />
</div>
<div id='thumbnails'>
<center> <img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' class='thumbnail' style='opacity: 1;'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-puppy-lying-down-on-grass-royalty-free-image-1587052215.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gettyimages-589656325-1-1586896598.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/chihuahua-dog-running-across-grass-royalty-free-image-1580743445.jpg' class='thumbnail'></center>
</div>
</div>
Edit: By setting the opacity of the default image to 1 using <... style=opacity:1;> I'm able to get it to have default opacity on page load. I fiddled around with another jQuery that changed opacity on hover, but this had the negative affect of setting the opacity of the thumbnail that was last hovered over to 1 rather than the one that was last clicked. At this point, the main issue us that my hover css is not working with the jQueryposted above.
When you use jQuery to set a CSS attribute you are adding it inline. Inline styles override CSS styles. The only way to get around this is to stick an !important after the style that you want to override the inline. In your case, its on the hover.
Hierarchy of CSS works like this, in order of importance and priority being rendered. Ie, if 1 isn't there, render 2 and so on:
CSS Style with !Important
Inline style
ID
Specific Class
Less specific class
See working snippet below:
jQuery(document).ready(function() {
$(".thumbnail").click(function() {
$("#mainimage").attr("src", $(this).attr("src"));
$(".thumbnail").css("opacity", "0.8");
$(this).css("opacity", "1");
});
})
#thumbnails img {
display: inline-block;
width: 20%;
cursor: pointer;
overflow: hidden;
opacity: 0.8;
}
#thumbnails img:hover {
opacity: 1!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id='gallery'>
<div id='panel'>
<img id='mainimage' src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' width=80% />
</div>
<div id='thumbnails'>
<center> <img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' class='thumbnail' style='opacity: 1;'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-puppy-lying-down-on-grass-royalty-free-image-1587052215.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gettyimages-589656325-1-1586896598.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/chihuahua-dog-running-across-grass-royalty-free-image-1580743445.jpg' class='thumbnail'></center>
</div>
</div>
Related
Show image shrink and gif in one second, then disappear together
i have a image.
after user click this image, Trigger the disappearing animation （0.5s）
When the animation ends, a gif is displayed on the background （0.5s）
Finally disappear together
like this.
You can have a simple html like:
<div id="myDiv">
<img id="myImg" src="img src" alt="">
</div>
on your css you need to give the property:
#myImg {
transition: all 0.5s ease;
}
That way there will be an animation when shrinking the image and with jquery you can do this:
$('#myImg').on('click', function() {
$('#myImg').css('width', '50%')
setTimeout(function() {
$('#myDiv').css('background-image', 'url("img/cat.gif")')
setTimeout(function() {
$('#myImg').css('display', 'none');
$('#myDiv').css('display', 'none')
}, 500)
}, 500)
})
When your img is clicked it will trigger a function where it will shrink its width but you can add new values for any width or height on the same way after a time out of 0.5s i will display a gif as bg and after another 0.5s both elems get a display none.
Hope it helps
I have an image(class photo) in my webpage and a button(class btn) named "Add to Cart". I want it to work such that when someone hovers over the product image, the "Add to cart" button starts showing over the image while the opacity of the image decreases a bit. I cant quite figure out how to make the button appear when i hover over the image. I am quite new to web development so please help. What do i write in css such that the button is only visible on top of the image when mouse is being hovered over the image.
<div>
<img class="Photo">
<button class= "btn">
<div>
<style>
.btn:hover{
}
<style
In order to connect the image (class="photo") and the button (class="btn") you need some form of container (e.g. a div element with class="container") that contains both.
You can then use the transition css property, to do the smooth switch of opacity:
.btn {
display: none;
}
.container:hover .btn {
display: inline-block;
position: absolute;
}
.container:hover .photo {
opacity: 0.5;
transition: 0.3s;
}
Surprisingly, after googling this for a bit I found tons of questions about how to fade the background of a div (not the text), but none of the converse. Please point me to one if you can find it.
I'm looking for a way to fade in the contents of a div. For example, I have a modal and if I apply the following rule to it:
animation-name: contentfadein;
animation-duration: 1s;
#keyframes contentfadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
Then it fades in everything (including the modal background itself).
Rather, I would like to only fade in the contents, such that the modal immediately loads and has its white background, but all of the contents of the modal fade in (such as the text, buttons, etc.)
All of the approaches I've tried so far also fade in the background, which I am looking to avoid.
The only thing I could think of is to apply this rule on every.. single.. item.. in the modal, but that would result in hundreds of individual rule additions (and also stop working when a new item is added, until that item is "fixed"), which seems inefficient compared to a better way.
You can apply rules to all component inside an element with css easily. Then you will need to deal with text directly inside your container, you can change the color of your text to transparent.
.container{
background: red; /* won't fade */
}
.container, .container *{
transition-duration: 1s;
}
/* This will apply for all content in .container */
.container:hover * {
opacity: 0;
}
/* OPTIONAL : This will apply for text directly in container */
.container:hover {
color: transparent;
}
<div class='container'>
I'm text directly in container
<p>I'm a paragraphe</p>
<input type='submit' value="I'm a submit button"/>
<div>
<p>I'm in a div and a paragraphe</p>
</div>
</div>
I use bootstrap`s modal on my site and backdrop opacity is 1. I can change opacity by adding
.modal-backdrop.fade.in {
opacity: 0.7!important;
}
in my .css file. But when I close modal, opacity changes to 1 and then closing - it's look ugly. I understood, that case in div, which appear in bottom of html document when modal is showing,
<div class="modal-backdrop fade in" style="opacity: 1;"></div>
but how to remove this div? And it's occure only on product page on other pages it works fine.
!important should override inline styles: https://css-tricks.com/override-inline-styles-with-css/
In your example you are missing a white space though.
.modal-backdrop.fade.in {
opacity: 0.7 !important;
}
Update
I assume the modal-backdrop is without the in class on close
.modal-backdrop.fade, .modal-backdrop.fade.in {
opacity: 0.7 !important;
}
I've come so far (but you wouldn't know it). Struggling through my art website.
This page
http://rollinleonard.com/elements/
This page has a little overlay div that hovers over these img. The first img is in the background of a div. I want that img to also have this blue highlighter effect.
How do I get it so that its a normal img and then on another layer over that img there is my nav (text with white background)?
Thanks!
I thick the easyest way to do this is to mak your first div like other image a > img and put your nav in absolute position.
HTML :
<nav>...</nav>
<a href="#">
<img src="home.gif" alt="Home BG" />
</a>
CSS :
nav {
position: absolute;
}
# rollin , there no need to use js check this
http://jsfiddle.net/sandeep/f2662/
wrap your navwrap-div in another div of the same dimension with the first image as a background
set the background of your navwrap div to transparent
allocate z-index values: 0 for the new wrapper, 1 for original wrapper, 2 for the nav-element
adjust the selector of your mouseenter-handler to 'img, #navbg'. you may also have to guard the dynamic setting of your click handler on the overlay div (pointless if vent target is the new div).
your code looks like this:
<div id="navbg" style="width: 300px; height: 300px; z-index: 0; background-image: url('home.gif');">
<div style="z-index: 1; background-color: transparent;" id="navwrap">
<nav style="z-index: 2;" >
...
</nav>
</div>
</div>
(use of inline definitions for styles for demonstration purposes only)
best regards, carsten
add this in your js file inside the $(window).load() event
$('#navwrap').bind('mouseenter', function () {
var $this = $(this);
if ($this.not('.over')) {
$this.addClass('over');
$overlay.css({
width : $this.css('width'),
height : $this.css('height'),
top : $this.offset().top + 'px',
left : $this.offset().left + 'px'
}).show();
}
}).bind('mouseout', function () {
$(this).removeClass('over');
});