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;
}
Related
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'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>
I have a problem with bootstrap carusel-control arrows that change the slides on click. When I click on the arrow on the phone its opacity holds to the value of 1, the default opacity of the arrows is 0.5(when the arrow is not hovered nor it is clicked). I want the carusel-control Arrow to remain opacity 0.5 after being cliked. On the Pc it is solved by the following code:
.carousel-control:focus{
opacity: 0.6;
}
but on the phone it does not work.
I have an example link, but for unknown to me reasons the code above doesnt work on that example: https://jsfiddle.net/borovec/psrxt7ay/25/
Appreciate any help.
Use the below CSS:
.carousel-control:focus, .carousel-control:hover {
opacity: 0.6 !important;
}
.carousel-indicators{
display: none;
}
.row-1{
margin-top:-7vw;
}
Very new to HTML and CSS. I've finally figured out how to hover a div and cause that to show text in another div. But what then happens is when I hover the div where the text appears that too shows the text; which I don't not want.
<div class="leaf5">
<img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'">
<div class="cashdup-info">
<h3 class="cashdup-text"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3>
</div>
</div>
Is there a way to hover the div called "leaf5" and have that show text in another div without the text showing up if I hover the actual div the text is contained in. My CSS is as follows:
.cashdup-text {
font-weight: 100;
font-size: 22px;
display: none;
}
.leaf5:hover .cashdup-text {
display: block;
}
Thanks.
.leaf5:hover .cashdup-text:hover {
visibility: hidden;
}
I wouldn't use display: none here, because an element that has display: none logically can't be in a hover state.
use this way :
Demo
Demo for singlle image only
CSS
div {
display: none;
}
img:hover + div {
display: block;
}
HTML
<img src="image/imh.pmg">
<div>Stuff shown on hover</div>
The issue you are facing is when you apply hover to your leaf5 div it displays the cashdup-text which then increases the area of leaf5 including the text part. That is why when you have text displayed you can't make it disappear. Because you are already hovering it.
You can try absolute position like this way:
CSS:
.cashdup-text {
font-weight: 100;
font-size: 22px;
}
.cashdup-text{
position: absolute;
display: none;
}
.leaf5:hover .cashdup-text {
display: block;
}
Fiddle: https://jsfiddle.net/dqz9j2tj/
The problem is, .cashdup-text is a child of .leaf5 so when you're hovering over .cashdup-text, the browser sees it that you're also hovering over .leaf5 (in a way).
Are you open to using JS? If so, please see below.
var showme = document.getElementById("showme");
showme.style.display = "none";
function display() {
showme.style.display = "block";
}
function hide() {
showme.style.display = "none";
}
<div class="leaf5" onMouseOver="display();" onMouseOut="hide();">
<img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'">
</div>
<div class="cashdup-info">
<h3 class="cashdup-text" id="showme"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3>
</div>
As you can see, I've added an id of "showme" to the h3 element you want to show / hide and have added MouseOver / MouseOut events to the .leaf5 div. I've also separated .leaf5 from the div below, just so it doesn't cause any issues like you described when hovering over .cashdup-text.
Try adding this to your stylesheet:
.leaf5:hover .cashdup-text {
opacity:0;
}
.cashdup-text {
opacity:1;
}
In Yahoo mail, when you are writing an email and you drag a file onto the page and hover, the message area becomes highlighted. It can be seen here:
The part of this that I don't get is how to have the blue area appear with partial opacity over the things under it that are normally visible.
With:
#blueBox {
background-color: #FFD090;
opacity: 0.0;
}
If the msgContent is a child of blueBox:
<div id='msgBox'>
<div id='blueBox'>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
</div>
and when msgBox is hovered I increase blueBox opacity from 0 to say 0.6, the blueBox will show but the msgContent div is hidden until the hover event. It should be visible always.
If the msgContent div is not a child of blueBox, then the blueBox doesn't cover it.
I've tried rgba (http://jsfiddle.net/mkasson/nJcxQ/19/) like here on SO, but it doesn't cover over the child elements.
Couldn't do my usual watching/inspecting via browser's webdev tools because focus was never on the browser while dragging the file onto it.
Thanks!
Here is how I would go about this,
(What the problem is, you are using the parents background. You can't make the parents background go over it's content, that is not what a background does. It merely sites behind everything it is containing and acts as a background.)
html,
<div class="messageContent">
<span class="overlay"></span>
<p>Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.</p>
This is a link
</div>
css,
.messageContent {
color: #000;
position: relative;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background: lightBlue;
opacity: 0;
height: 100%;
width: 100%;
display: block;
z-index: 100;
}
.messageContent:hover .overlay {
opacity: 0.6;
}
What I am doing is placing an absolute span tag inside of the parent to act as the color overlay. When the parent is hovered the overlay child will become active by increasing it's opacity.
JSFIDDLE
Here's how I would do it.
<div id='msgBox'>
<div id='blueBox'>
</div>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
CSS
#blueBox {
background-color: #FFD090;
opacity: 0.0;
position: absolute;
top: 0;
left: 0;
}
jQuery
$("#msgBox").hover(function(){
$("#blueBox").css({top:$(this).css("top")}).height($(this).outerHeight()).width($(this).outerWidth()).animate({opacity:0.6});
},function(){
$("#blueBox").animate({opacity:0}).height(0).width(0);
});
http://jsfiddle.net/54cx7/2/
The problem is that since content is a child of bluebox, then it inherits the 0 opacity.