I'm trying to create different opacities on images on a carousel slider.
There are two DIV classes for the one in focus and the rest which is out of focus/not active.
figure class="flkty-carousel__cell gallery-item object-fit-img object-fit-img--loaded"
figure class="flkty-carousel__cell gallery-item object-fit-img object-fit-img--loaded is-selected"
I want the loaded DIV to have opacity 0.5 and the 'is-selected' DIV opacity 1.
I can easily add this to the CSS:
.flkty-carousel__cell {
opacity: 0.5;
}
But now all the images get opacity 0.5.
How do I add the correct CSS to seperate the two DIV classes?
.flkty-carousel__cell.is-selected {
opacity: 1;
}
This selector will target an element that has both the .flkty-carousel__cell class and the .is-selected class.
Related
I want to remove icons from my website using CSS
You can see it here https://www.stormyark.de/hksv
I uploaded the website files at github
I already tried to set the "width=0" of the icons but nothing happened.
use display: none; on the class of the element you want to hide.
There are 3 ways of hiding an element in CSS.
display: none;
This will remove the element from the DOM
opacity: 0;
This will hide the element.
visibility:hidden;
This will hide the element.
Note: Opacity and visibility does not remove the element.
I think my classes or ID's are messed up when I try to call it.
CSS:
image#ply : hover .ply-text {
visibility: visible;
}
HTML:
<image id="ply" style="height: 50px; padding:5px;" src="images.png">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Some issues first:
The HTML element for embedding images is called img.
An img element's content model is empty, i.e. it may not have any child elements.
Even if those were not issues, you would not see the effect you're looking for since the text is already visible at the start.
Given that, here's a possible solution:
.ply-text {
visibility: hidden;
}
#ply:hover ~ .ply-text {
visibility: visible;
}
The ~ is a sibling selector that allows one to refer to an element following another.
Images use an <img> tag (not 'image') - that's important to note (as it hasn't been commented on so far). As remarked, you should remove the space between the id and the :hover in your css.
I would advise you remove the inline style and use css or at least add it into your id style/ add extra attributes as a class in the head of the body (css is better!).
In the style, you don't need image/img before the definition of your id, you can just leave #ply{your style} on it's own.
If you want to display the pic on hover, I would use display:block/none instead. Visibility just shows it if it's hidden. (I've done so in the snippet, run and see if it's the desired effect). Also, use an alt tag! I added one. If you want to show/hide the text you could use either but first you have to set the visibility to hidden or display to none... I added a class for ply-text on its own for this.
So your code would read
#ply {
height: 50px;
padding: 5px;
}
.ply-text{
display:none; /* or visibility:hidden*/
}
#ply:hover +.ply-text{
display:block; /* or visibility:visible*/
}
<img id="ply" src="images.png" alt="plyimage">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Hope this helps
Here is a sample code for the html and css:
HTML
<nav>...</nav>
<div class="row"></div>
CSS
.nav{
margin-bottom: 10px;
}
I want a gradual fading effect in the bottom margin of the navbar.
Please help. What css property needs to be set to do this?
If your nav background is a solid color (or the "faded" part is one color), you could add an ::after pseudo-element with a background gradient to simulate the color fading out.
Here is a demo of how to do this.
If you want to add a fading effect on CSS, you can play with opacity property going from 0 to 1. Then, you have to couple this property with another property called transition. To create a transition effect, you must specify two things:
the CSS property you want to add an effect to. In your case, it's opacity.
the duration of the effect
So, you can try a CSS like this to change the opacity for your nav :
.nav
{
opacity : 1;
margin-bottom: 10px;
transition : opacity 2s;
}
If you know about JQuery, there are special functions to do a fading in/out effect.
Hope it will help you.
Is it possible to have an image hidden by default and unhide it on :hover? I tried using the visibility property, but invisible elements can't be hovered on.
If you use display or visibility, the element is not there so you can't hover over it. Try it with opacity:0; . You can do it with css:
.img { opacity:0; }
.img:hover { opacity:1; }
I realize that you specifically asked about jquery, but it is possible to do what you're asking just with css, though you may have to use opacity:0 rather than display:none to hide the image.
You can use a css hover event. Start by applying a class to your image:
<img src="theimage.jpg" class="hidden-image"/>
In your css, you can then use the class and a css hover event to show the image when the cursor is over the image:
.hidden-image {
opacity: 0;
}
.hidden-image:hover {
opacity:1;
}
Here's a jsfiddle: http://jsfiddle.net/fZd7J/
Directly you can't mouseover/hover a hidden image that is, its not possible with visibility:hidden; or display:none;, but you can have some tricks to do that.
using css
apply opacity: 0; to the image and :hover change opacity:1;
using js
create a parent <div> to the image and mouseover to that div apply display:block; to image.
Working Fiddle Click here
html{
background-color:#739AC5;
}
img{
display:inline-block;
color:#739AC5;
background-color:#739AC5;
margin:0px;
}
I added two inline-block gif images. However, after I add them, the background color changes from a light blue to white but only on that line. I've added color and background-color properties to image but nothing changes. If I remove the images from my HTML, the background-color returns to normal. I searched somewhere to change line-height:0; but this did not work for me either.
Any ideas as to what is going on? I might add I am using bootstrap but I linked my stylesheet last.
There is a more specific selector for img elements, such as:
div img { background-color: #fff; display: block; }
This selector overrides the other one since specificity trumps the cascade.