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.
Related
I would like to animate the transition of a div's size (signupForm) whose content changes dynamically.
The size of the container div in each step is unknown.
I would prefer to do this in CSS.
I'm using Vue.js to swap out the forms.
<div class="signupForm">
<component id="currentView">
<FormOne></FormOne>
<FormTwo></FormTwo>
<FormThree></FormThree>
<FormFour></FormFour>
<FormFive></FormFive>
</component>
</div>
#signupForm never leaves, but FormOne gets swapped for FormTwo, etc.
I have added the following:
.signupForm {
max-height:inherit;
display:inline-block;
transition: max-height 0.3s ease-in-out;
}
But the transition property didn't help much. Any ideas?
I am not sure max-height has transform possibility, Maybe this helps:
.signupForm {
max-height:inherit;
display:inline-block;
transition: height 0.3s ease-in-out;
}
I think that the problem is with max-height: inherit;
Try to use some big value in px (5000px for example). The value that you think, you will never reach.
In the following example I am trying to get the pop out "tickets" to show in front of the other doors:
http://codepen.io/anon/pen/EVMXVz
I have attempted to apply a higher z-index on the div.appeal-details when the article is hovered over - I'm unsure why this isn't working:
article:hover .record .jukebox-ticket {
animation: growTicket 0.4s ease-in-out;
display: block;
position: absolute;
top: 150px;
margin: 0px auto;
z-index: 20;
}
My understanding is that the higher z-index combined with absolutely positioning should work - but clearly not.
Keen to avoid JS, but will do if needed.
Thanks!
You may add
position:relative; z-index:1;
to your article and for article:hover higher
z-index:2;
or 10;
Check example: http://codepen.io/anon/pen/zvbdrB
P.S. And than there is no need in javascript part as i can understand.
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.
I know that you can make hovering over a div affect the div directly after it with '+' and any div after it with '~'. But I have a situation where I need a div directly before and after the div I'm hovering over to be affected. What I am trying to do is have 4 circles grow on hover (which works fine), and the adjacent circles should be pushed aside.
Here is a codepen that may make it more apparent what I am trying to do:
http://codepen.io/anon/pen/Bojug
Here is a snippet of code with the issue.
#circ2:hover + #circ3{
margin: 100px 0px 100px 8%;
}
#circ2:hover ~ #circ1{
margin: 100px 2% 100px 13%;
background: blue;
}
As you can see, when you hover over circle number 2, circle number 3 is pushed aside but circle number 1 is not. Does anyone have a way around this. I know some of you may suggest JS or JQuery which I am not familiar with. In that case could you point me in the right direction? Also, I know there are many threads that address similar issues but I havent seen one that asks about affecting preceding divs. Thanks in advance!
From what I understood from your question I think you want to shift the preceding elements like the post elements.
If I am correct, just use the simple technique .Shift parent relatively on hover - >
#circles:hover{
position:relative;
right:40px;
}
Demo
Update with transition
#circles{
position:relative;
right:0px;
}
#circles:hover{
position:relative;
right:40px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
Demo 2
I'm too lazy to change youre code, since it's quite big, but the following idea should help:
You have
#circ2:hover + #circ3 //Affects circ3, when circ2 is hoverd
Now you want to affect #circ1, when circ2 is hoverd.
Try this:
#circ1 //Set the rules you want to see applied when circ2 IS hovered
#circ1 + :not(:hover) //Set the standard style here.
That way, since #circ2 isn't ususally hovered, you see the standard style. But as soon as you hover over it, the :not()-selector will no longer apply - and the hover styles will apply.
I have a question regarding links and divs. I want the whole div to be clickable and in the same time the text should be copyable, so that the google bots for example can read them as text.
Anybody got any ideas?
my code looks like this :
<div id="menubutton1"><br>
SOTNING</div>
#menubutton1{ width:149px; height:77px; float:left;margin-left:290px; text-align:center;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
#menubutton1:hover{
background-color: #F93;
cursor: pointer;
}
Your best bet is to create an anchor element, set that to display:block and position:absolute. See below:
<div id="menubutton1">
<p>You text which you want read by search engine bots.</p>
</div>
Add the following style
<style>
#menubutton1{
position:relative;
}
.fill{
position:absolute;
display:block;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
</style>
See fiddle.
The text won't be selectable directly from the DIV as the anchor block is floating over the top, but if selecting the page or from outside the DIV then the text can still be selected.
There's no evidence showing this will affect search bots reading the content as the content is still visible.
Alternatively you will need to use a JavaScript function to run on the click event and go to a specified link. This will however cause a problem for a search bot as they don't knowingly read/follow JavaScript. If you do choose the JS route I'd suggest having the link available on the page elsewhere too to ensure it is followed.