I have html like this:
<div class="projectThumb">
<div class="textContainer">
<h1>Header1</h1>
<h2>▪ Header2a ▪ Header2b ▪</h2>
</div>
<a class="project1 video" href="https://player.vimeo.com/video/xxxxxx?transparent=0"><img src="Thumbnails/project1.png"></a>
</div>
Clicking the <a> tags with class="video" trigger a JS plugin that opens a video player within the page.
My CSS looks like this:
.projectThumb img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.projectThumb img:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
filter: alpha(opacity=0.2);
opacity: 0.2;
}
When you hover over the <img> within the <a> (which takes up the whole projectThumb), the <img> opacity decreases revealing the text, but the image still bleeds through the text because the image is still on top of it. Is there a way to change the z-index of one of the elements to avoid having it bleed through? I've tried adding the following to CSS:
.projectThumb a:hover {
z-index: -999;
}
I've also tried adding z-index to .projectThumb img:hover like this:
.projectThumb img:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
filter: alpha(opacity=0.2);
opacity: 0.2;
z-index: -999;
}
Neither work. I can bring the text to the front by setting the z-index of .textContainer h1, .textContainer h2, .textContainer h3, which does bring the text to the front, but I don't know how to trigger that on projectThumb img:hover so that it's only on top of the image on hover. I'd also like the entire <div> to remain clickable, even the text portion. When I bring the text to the front using z-index, the text area isn't clickable because it's on top of the <a>.
Not sure if its anywhere else in the CSS but I don't see any positioning.
In order for z-indexing to work you need to have some sort of position set.
Add position: relative to any of the classes you want to apply z-indexing to.
.projectThumb a, .projectThumb img {
position: relative;
}
If you really want to use z-index for that, you may use variables:
:root {
--thumbIndex: 0;
}
.projectThumb {
z-index: var(--thumbIndex);
}
a:hover {
--thumbIndex: -999;
}
I think thou, better idea will be to use the display property instead.
Related
With code below, when tapping the sample element, the sample will go big and then go small, it's nice.
But the question is, when I tap the sample element twice, the effect will only show once.
I know that's because the sample element is still focused, so the animation is not triggered.
I want to solve this with just css, what should I do?
.sample:hover, .sample:focus {
animation: phoneButtonEffect 0.2s linear;
}
#keyframes phoneButtonEffect {
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
That can be achieved with the :active pseudo class.
Take a look at this:
.sample{
height: 10em;
width: 10em;
background-color: red;
transition: all .2s ease-in-out;
}
.sample:active {
transform: scale(1.1);
transition: .1s;
}
<div class="sample">
</div>
The first .2s value is the that the transition will take to be back to normal and the second value .1s in the :active selector, is the time that the .sample element will take the reach the desired state, in this case, scale(1.1).
I'm very new to web dev right now, and I'm currently trying to make an image fade into color upon hovering over it. This is what I've got right now:
html:
<body>
<img src=imgmonochrome.jpg id=img1>
</body>
css:
#img1 {
position: top right;
height:49%;
width:49%;
transition: content 0.5s ease;
}
#img1:hover {
transition: content 0.5s;
content: url('imgcolor.jpg');
}
The image will switch, but will not fade in.
I've looked all over for answers on this, but I can't find any that use just HTML and CSS (cause I'm illiterate in javascript/jQuery ((but going to learn very soon for this very reason)))
Help would be appreciated.
YES, this is possible... But not in the traditional sense.
In order to accomplish this, you'll need to forgo <img />, and instead make use of two images presented with content: url() in :before and :after pseudo-classes. Set the :before to be your starting image, and :after to be your target image. Then set the opacity of :after to 0 by default, and set the two pseudo-elements to sit on top of one another. Finally, set a :hover rule for both :before and :after which toggles their opacity, and use transition: opacity to control the fade.
This can be seen in the following:
* {
margin: 0;
}
.image:before {
content: url("https://via.placeholder.com/150/FF0000/00FFFF");
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
.image:after {
position: absolute;
left: 0;
opacity: 0;
content: url("https://via.placeholder.com/150/00FFFF/FF0000");
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
.image:hover:after {
opacity: 1;
}
.image:hover:before {
opacity: 0;
}
<div class="image"></div>
Remove content from the transition and use img tag to set image
<img src="imgmonochrome.jpg" id="img1">
#img1 {
position: top right;
height:49%;
width:49%;
transition: 0.5s ease;
}
#img1:hover {
opacity: 0.3;
background: url(imgcolor.jpg);
}
Alternatively,
<img src="imgcolor.jpg" id="img1">
#img1 {
filter: gray;
-webkit-filter: grayscale(1);
-webkit-transition: all .5s ease-in-out;
}
#img1:hover {
filter: none;
-webkit-filter: grayscale(0);
}
I'm having difficulty trying to get an image overlay and image zoom to appear at the same time on mouse hover. For some reason, the overlay disappears when I added the image zoom. It seems like one webkit transition cancels the other out. Either the zoom will work or the overlay will appear but not both. Any help is greatly appreciated, I've been researching for hours and can't seem to figure it out.
HTML Code:
<div class="image_wrap">
<div class="caption">
<i class="fa fa-search-plus" aria-hidden="true"></i>
<p class="heading">
Resort Website
</p>
</div>
<img src="css/images/resort.jpg" alt="resort" class="portfolio-pic">
</div>
CSS Code:
.image_wrap{
position:relative;
}
.image_wrap .caption{
position:absolute;
width:100%;
height:100%;
opacity: 0;
text-align:center
display:inline-block;
background: linear-gradient(rgba(51, 153, 170, 0.9), rgba(51, 153, 170, 0.8));
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.image_wrap .caption:hover{
opacity: 1;
}
.image_wrap .caption img {
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.image_wrap .caption:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
I detect two problems on your code, change this:
.image_wrap .caption:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
For this:
.image_wrap:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
z-index:8;
}
You can answer why. Because your image not inside .caption and you didn't declare the z-index (caption on the image).
Declare the z-index on caption too.
.image_wrap:hover .caption {
opacity: 1;
z-index:9999;
}
Here is the link for jsfiddle where I test our code: link
Hey I would like a magnifying glass or some image to pop over another image when on mouseover like this website - http://www.elegantthemes.com/gallery/ When you hover over an image an image appears over it. Does anyone know how to achieve this?
Not sure if you need any code but here's my css for the img tag:
img {
width: 600px;
height: 342px;
border-radius: 1px;
}
You can do it with
HTML
<div id="yourImage" ></div>
CSS
#yourImage {
background-image: url('image1.jpg');
}
#yourImage:hover {
background-image: url('overimage.jpg'), url('image1.jpg');
}
There is a jquery plugin for this.
The first effect is what you're looking for.
You can try this. I think it uses only CSS.
You need to check the CSS position attribute, so you can have both elements on the same place.
And then just chang the opacity of the hover image.
#Mateusz has the best answer, but I would improve upon that by adding the css transition something along the lines of this:
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
Try this:
HTML:
<div class="your-img">
<div class="your-hover"></div>
</div>
CSS:
.your-img {
width: 300px; /* your image width and height here */
height: 225px;
background-image: url('../img/image_01.png');
}
.your-hover {
width: 300px;
height: 225px;
opacity: 0;
filter: alpha(opacity = 0);
background-image: url('../img/image-hover_01.png');
}
.your-hover:hover {
opacity: 0.5;
filter: alpha(opacity = 50);
}
filter: alpha is for IE, I hope it helps.
I'm trying to make a picture over picture fading with some text appearing on them purely with CSS3. I took the basic fading from here: http://css3.bradshawenterprises.com/cfimg1/
Now what I'm trying to do is, that when I hover the picture, then not only an other picture fades in, but some text too what contains a clickable link (for ie. a download link). The first problem was that the text appeared outside the div, which I could fix by adding this:
.crossfade h1 {
position: absolute;
}
I use h1, because paragraphs don't appear at all. So after this, I got the fading right, and even the text is in it's place, but it's not selectable and not clickable, it appears like it's a part of the image.
Here's my code so far (the html and the css part too):
<div class="crossfade">
<img class="bottom" src="pics\hover.jpg" />
<h1>Title</h1>
<img class="top" src="pics\23.jpg" />
</div>
.crossfade {
position:relative;
height:200px;
width:200px;
margin:0 auto;
}
.crossfade img {
position:absolute;
left: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.crossfade img.top:hover {
opacity: 0;
}
.crossfade h1 {
position: absolute;
}
Any help or ideas on it would be greatly appreciated.
Thanks in advance.
http://jsfiddle.net/3tkWj/5/
I just added another :hover and z-index.
.crossfade img.top:hover, .crossfade p:hover+img {
opacity: 0;
}
edit : Here's a working exemple of what you want (see comments)
http://jsfiddle.net/3tkWj/12/
Beware, I trimed the CSS.