I've been messing around with images sliding with hover on a separate page from my main work and it worked like a charm. However, when I transfer it to my main page, it doesn't work, for some reason. I even copy-and-pasted so there should be absolutely no problem going on.
.pictureContainer2 img:hover {
top: 50px;
}
.pictureContainer2 img {
position: relative;
top: 0px;
transition: top .2s ease-in-out; }
And this is how it is in the body.
<div class="pictureContainer2">
<img src="icontag.png"></div>
I'm sorry if this is obvious or just plain silly. I just got into web development.
Thanks for you time.
Related
I've been testing my portfolio website (http://www.meades.org/Hazel-Portfolio/) on different browsers. The website landing page is designed for an image-specific caption to fade in and obscure the original image whenever the mouse hovers over the image. It seems to work on every browser I've tested so far except for Microsoft Edge. For some reason the blue caption block gets cut off at the bottom and inserted on top of the next image and I can't figure out why.
Here's the CSS I've applied to the images to get the effect:
.index-caption {
background-color: #75bff0;
color: black;
font-size: 16px;
padding-top: 25%;
opacity: 0;
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
text-align: center;
display: inline-block;
}
.index-caption:hover {
opacity: 1;
}
And here's an example of that class style being applied to the html (I'm using the Bootstrap .card-columns class to group the images):
<div class="card">
<a href="EMP.html">
<img size="100%" height="100%" class="card-img-top" src="images/emp.png" alt="Ethnomusicology Major Project">
<div class="index-caption">
<h2>The Ideology of the Modern Concert Hall</h2>
<br>
<h4>Last updated: 5/10/19</h4>
</div>
</a>
</div>
I've done some trial and error CSS editing and think the issue might be to do with how the transform and/or display values operate in Microsoft Edge, but I'm not sure and am pretty far out of my coding depth at this point. Does anyone know why it's not working and/or have any advice on how to fix it?
I believe you have hit this bug -> https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107210
Just add overflow: hidden; to .card-columns .card to work around this.
Also, there is no need for the transform as you have width and height at 100%. You could just have:
top: 0;
left: 0;
and no transform.
The page in question:
http://rainbowdoge.000webhostapp.com
The situation:
I have two buttons in the nav menu on the left side.
The upper one contains a hitbox (black for testing purposes), and an image of a rainbow. The image is changing the opacity on hover.
CSS code for that:
.icon {
opacity: 0.6;
backface-visibility: hidden;
transition: opacity 0.3s ease-in-out;
}
.iconHitbox:hover .icon {
opacity: 1;
cursor: pointer;
}
There is also an iframe on the page. The iconHitbox changes the iframe's source on click.
The problem:
If I hover over the top half of the button, the opacity doesn't change, as if a hover isn't even detected.
The solution I could think of:
I thought that maybe something else is getting in the way, but no, the setSrc() function works when I click on the upper half of the button.
This is happening because your #test1, #test2, and #test3 elements are being positioned half way over the rainbow circle. You'll need to move them out of the way.
The div with the id "test3" is overlapping with your icon. You can see it in the dev tools of your browser.
You have absolute set. If you remove absolute then adjust positioning you'll be good.
try:
#mainPageIcon {
background-color: black;
position: relative;
top: 25px;
}
.iconHitbox {
height: 8vh;
width: 8vh;
}
I have simple markup like http://jsfiddle.net/2nzp8835/1/. After clicking on expand content becomes "full screened". Then I added fade in animation using animate.css like on http://jsfiddle.net/ph1rvh6p/1/ and expand was stop working.
I can't figure out why. Is it possible to use both animate.css with fixed positioned elements?
I fix it, but there is some reason that I can't still figure it out.
My solution is here: JSFiddle.
The key attribute is vw and vh
.fullscreen-mode{
height: 100vh;
left: -10px;
position: fixed;
top: -10px;
width: 100vw;
z-index: 99999;
}
it's CSS3 attribute. If you consider IE8~IE9, It's may be ineffective. But on Chrome and FF, it works well.
I try it to find the detail reason.
Here is some clue:
In the animation.css, you used these class
.fadeInRight {
animation-name: fadeInRight;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
I remove some of these. And the effective will be back. So, I guess the animtion redefine the page flow so that make your purpose effect doesn't work.
Here is a attach question:
How the class named animated and .fadeInRight effects page flow in animation.css?
Hope someone can help.
This is my first question. I usually try to research these things well, but this one is driving me crazy.
I need to be able to do something very similar to what you see here (hover over the box):
http://dev.ranvel.com/test-hover-method.html
The problem is the jitter that I get. It looks very unprofessional.
I want to use CSS and HTML (and not images) because what will eventually happen is there will be words behind the box and by hovering, you will see a translation.
What I've seen already are things like keeping the fonts the same, removing bold text, etc. Here, the whole div is changing and not just the text. I've also seen the "transition trick" where you increase the amount of time between the transitions. The problem is that sometimes when the mouse comes to a rest over the div, it is in its "non-hover" state.
Thanks in advance!!!
Instead of visibility: hidden; try using opacity: 0;
.over:hover {
opacity: 0;
}
http://jsfiddle.net/6WPHk/
You can even setup a transition on the .over div:
.over {
transition: opacity 0.3s;
}
It might be easier to make the .over a child of .under.
It would be a lot easier to position .over.
You can then apply the hover selector to .under, while still applying
the visibility rule to .over.
JSFiddle
HTML
<div class="main">la la
<div class="under">
<img class="over" src="//lorempixel.com/100/100" alt="">
Bibendum Etiam Fermentum Mattis
</div>
</div>
CSS
.under {
position: relative;
}
.under:hover .over {
display: none;
}
.over {
position: absolute;
top: 0;
left:0;
}
I am using php, html, and css to create a caption that displays the title first then sliding even more to reveal excerpt on hover.
Sample structure of basic post setup (simplified for clarity):
<div class="post-container">
<img src="postThumbnail.jpg" />
<span class="post-caption-container">
title
this is the excerpt
</span>
</div>
CSS file
.post-container{
position: absolute;
height: 200px;
width: 300px;
overflow: hidden;
}
.post-caption-container{
width: 300px;
height: 80px;
top: -45px;
}
.post-container:hover .post-caption-container{
top: 0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
Inline HTML to override styling
<div id="post-container" style="height: 140px;">
<img src="postThumbnail.jpg" />
<span class="post-caption-container" style="height: 50px; top: -25px; ">
title
this is the excerpt
</span>
</div>
The portion where "style = top: -25px;" is causing problems.
My best guess is that the inline html styling "style= top: -25px;" is overriding values in both ".post-caption-container" and ".post-container:hover .post-caption-container", which is not what I want.
I need ".post-container:hover .post-caption-container" value to remain "top: 0px;".
I've spent about a week trying to resolve this issue, but I'm stuck! I don't know if this is impossible to achieve?
Any help would be appreciated. If this problem is impossible, perhaps an alternative method to achieve the same result, would love some different ideas as well! oi vey, thanks so much!
Positioning values like top: XXpx etc. don't work unless the element they are applied to also has a position set, such as position: relative, so perhaps try adding that in. I don't quite understand the example you are working with, but that might be all you need to get it working.
PS: Welcome to Stack Overflow. :-)
EDIT: In response to comments below, I now understand that the problem relates to an inline style overriding stylesheet declarations, and yes, inline styles carry more weight that stylesheet rules in the laws of the cascade.
However, there is one way to override the inline style, using !important:
.post-container:hover .post-caption-container{
top: 0px !important;
}
So, you place !important after the rule but before the semicolon. (Note also the period . before .post-caption-container above. You left it out, but without it the declaration won't work anyway.