Hello all I have two images that switch on hover. in the divs they are currently in the images overlap, both starting at the top of the div as opposed to beside it.example
<div class="storyboard">
<div class="storycard" >
<img src="Images/Articles/Index/world%20cup2.jpg" class="primary">
<img src="Images/Articles/Index/world%20cup.jpg" class="secondary">
</div>
<div class="storycard">
<img src="Images/Articles/Index/ntci2.jpg" class="primary">
<img src="Images/Articles/Index/ntci1.jpg" class="secondary">
</div>
and my css
.storyboard{
width: 100%;
padding: 30px;
}
.storycard{
position: relative;
float: left;
}
.storycard img{
position: absolute;
margin: 0 auto;
}
.storycard .secondary:hover {
position: absolute;
top: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
display: block;
}
Due to the .storycard .secondry:hover as it is I cant make the .storycard img relative other wise I get this. Thanks.
First of all enclose your all div elements in a #wrapper.
and set the display of #wrapper to display:inline-block;
#wrapper{
width: 100%;
padding: 30px;
display:inline-block;
}
Then give different class to both div elements inside the #wrapper
See the Demo
Related
I'm working on a template using Bootstrap. I have a little problem with my CSS hover. I just make a hover on div inside div.
This fiddle show my problem: https://jsfiddle.net/iklas/q5Lm7cLe/
When I hover on thumbnail the hover is showing on all parent div product-box.
I want when I hover on product-box the hover showing on just thumbnail div.
How can I solve this problem?
Just add position: relative; to .thumbnail
Updated fiddle
When You hover on thumbnail the hover is showing on all parent beacause you haven't give the css property Position:relative to .thumbnail.
.product-box a {
color: #666;
}
.product-box a:hover {
color: #666;
text-decoration: none;
}
.thumbnail {
position: relative;
}
.thumbnail:hover:before {
background-color: #000;
width: 100%;
height: 100%;
display: block;
position: absolute;
content: "";
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
opacity: 0.5;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
<div class="container">
<div class="row">
<div class="product-box col-md-3 col-sm-4 col-xs-12">
<a href="#">
<div class="thumbnail">
<img src="http://dummyimage.com/100x250/bdbdbd/fff&text=image" alt="...">
</div>
<div class="caption">
<h4 class="product-title">SheIn Grey Contrast Collar Long Sleeve Pleated Dress</h4>
<h4 class="brand-name pull-left"><span>By</span> Day Dresses</h4>
<h4 class="price-number pull-right">$34.56</h4>
<div class="clearfix"></div>
</div>
</a>
</div>
<!-- /.box-product -->
</div>
</div>
Your transition is not working because you haven't used this.
Try this is would work.
.thumbnail:before {
content: "";
transition: all 600ms linear 0s;
}
.thumbnail:hover:before {
background-color: #000;
width: 100%;
height: 100%;
display: block;
position: absolute;
content: "";
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
opacity: 0.5;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
I am creating a rollover on an image div where once you roll over, the image opacity goes down and text over the top appears. This works fine for just one image, but when trying it on more then one image the opacity doesn't work correctly and the text doesn't seem to appear on the other images.
HTML:
<div class="worklongdiv" style="padding-top:111px";>
<img src="images/Vividworklong.jpg"/>
<div class="work-text-content-long">
<header>VIVID VAPOURS</header>
<p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
</div>
</div>
<div class="worklongdiv" >
<img src="images/Vividworklong.jpg"/>
<div class="work-text-content-long">
<header>VIVID VAPOURS</header>
<p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
</div>
</div>
CSS:
.worklongdiv{
width: 100%;
min-height: 120px;
max-height:auto
position: relative;
background-color: black;
}
.worklongdiv:hover img {
opacity: 0.3;
}
.worklongdiv:hover .work-text-content-long {
opacity: 1;
}
.worklongdiv img {
padding: 0;
width: 100%;
display: block;
opacity: 1;
}
.worklongdiv img,
.work-text-content-long {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.work-text-content-long {
height:100px;
position: absolute;
color: white;
left: 0;
top: 25%;
right: 0%;
left:101px;
bottom: 0;
font-size: 24px;
text-align: left;
opacity: 0;
}
You're missing a ; in one of your CSS rules.
.worklongdiv{
width: 100%;
min-height: 120px;
max-height:auto;
position: relative;
background-color: black;
}
Take a look at this: http://jsfiddle.net/8D4f4/1/
The problem is that the li-element is too high. You can see that the list element got a grey background. You can see the grey under the image.
The question is. Why is the li element higher than the image?
I need the li element to have the same height as the image.
html
<div id="content">
<ul id="references-all" class="references">
<li data-id="online">
<img src="http://s1.directupload.net/images/140627/779m36rh.jpg"
width="324" height="240" class="references-images">
<div class="description">
<img src="http://s14.directupload.net/images/140627/z49aajek.png">
<div>
<p>Lorem Ipsum Lorem</p>
<img src="http://s1.directupload.net/images/140627/g8yce4ta.png"
width="28" height="27" class="description-arrow">
</div>
</div>
</li>
</ul>
</div>
css
#content .references {
margin-bottom: 50px;
max-width: 980px;
width: 100%;
}
#content .references li {
background-color: darkgrey;
float: left;
margin: 1px;
max-width: 404px;
min-width: 225px;
overflow: hidden;
position: relative;
width: 33%;
}
#content .references li:hover > .description{
background-color: #78785a;
height:100px;
}
#content .references li .references-images {
height: auto;
width: 100%;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.description {
bottom: 0;
color: #ffffff;
display: block;
height: 50px;
overflow: hidden;
padding: 7px 0 0 5px;
position: absolute;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
width: 100%;
}
.description p {
color: #ffffff;
display: block;
float: left;
font-size: 0.800em;
margin: 0;
padding-bottom: 15px;
padding-top: 10px;
width: 85%;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.description .description-arrow {
float: left;
margin-top: 10px;
}
li's height is greater than img's, because img's layout is similar to inline-block and it positions img's bottom edge to the text's baseline which is causing spacing to appear for the text descenders. In your case you can just add vertical-align property to the img element to remove spacing below the image :
img { vertical-align:top; }
JSFiddle
set display:block on your <li> and your <img>
#content .references li {
display:block;
}
#content .references li .references-images {
display:block;
}
Fixed Fiddle
Probably not the first time you see this question... but I can't solve this problem.
Here is live version
http://jsfiddle.net/LndEh/
If you change height for .projectwrap, you will see what I am trying to achieve. I have tried add clearfix etc.
HTML
<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><span>sometext</span></div>
</div>
<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><span>some text</span></div>
</div>
<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><span>some text</span></div>
</div>
CSS
.projectwrap
{
position: relative;
width: 28%;
height:auto;
float:left;
}
.projectwrap img
{
position: absolute;
width: 100%;
}
.inner
{
width: 100%;
height: 100%;
background-image: url(http://goodlogo.com/images/logos/batman_logo_2574.gif);
background-size: cover;
position:absolute;
z-index: 11;
opacity: 0;
-webkit-transition: opacity 400ms linear;
-o-transition: opacity 400ms linear;
-moz-transition: opacity 400ms linear;
transition: opacity 400ms linear;
}
.inner a
{
float:left;
text-align: center;
display:table;
width: 100%;
height:100%;
}
.inner a span
{
display: table-cell;
vertical-align: middle;
width:100%;
height:100%;
color:#fff;
text-align: center;
text-transform: uppercase;
}
.inner:hover
{
opacity: 1;
-webkit-transition: opacity 400ms linear;
-o-transition: opacity 400ms linear;
-moz-transition: opacity 400ms linear;
transition: opacity 400ms linear;
}
Since the containers are floated and contain absolutely positioned images, they have no height and will float over each other.
If you want all three logos to appear, change the CSS for the images to position:relative
.projectwrap img {
position: relative;
width: 100%;
}
http://jsfiddle.net/LndEh/1/
EDIT:
Another method, if you need to use position:absolute on the images:
Set a minimum height for the .projectwrap divs so that they don't collapse to zero height.Then they will float as expected.
.projectwrap {
position: relative;
width:28%;
float:left;
min-height:5px;height:auto!important;height:5px;
}
http://jsfiddle.net/LndEh/2/
EDIT:
For the additional three (hidden) images, I have changed from using a background image to using the same 100% width method you used for the superman logos. I placed the links over the image by positioning them absolutely.
.inner {
position:relative;
width: 100%;
...
}
.inner a {
position:absolute;
...
}
http://jsfiddle.net/LndEh/3/
EDIT:
I think I see now what you're going for.
I switched from using background-image on .inner to using <img /> and kept your elements positioned absolutely. Does that work better?
http://jsfiddle.net/LndEh/7/
I'm trying to apply a hover state to some portfolio navigation. It's a horizontally and vertically centered header on top of an image. The centering works as I need it to (there are reasons for it being as complicated as it is, or believe me, I would do it some other way).
But the hover state is giving me problems. I'm trying to do something like this: http://jsfiddle.net/kmjRu/33/. Which is a transition of the h2 and its background on hover of the image. I can get it almost working by fiddling with opacity or the z-index of the h2, but especially the change of the background color is not working (because there are no elements exactly covering the image, of which I can change the background). Does anyone know how to get the hover state working properly?
This is the code I have and on which I'm trying to get this hover effect to work:
(Also posted here: http://jsfiddle.net/kmjRu/34/)
HTML
<article>
<div class="img-crop">
<h2>Title</h2>
<img src="http://bit.ly/gUKbAE" />
</div>
</article>
CSS
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
article {
overflow: hidden;
}
.img-crop {
display: inline-block;
position: relative;
overflow: hidden;
max-width: 100%;
}
h2 {
margin: 0;
padding: 0;
z-index: 1;
line-height: 0;
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
}
h2 {
margin: 0;
padding: 0;
z-index: 1;
line-height: 0;
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
h2:hover {
opacity: 1;
}
This could be it!
Basically, you need to make sure following things.
your h2 should be exactly equal to the container behind, only then it will perform a total overlay.
set the default opacity of h2 to be 0. and change/transition it to some mid value say 0.6 upon hover.
now also, you need to make the background-color of the h2 black, or different than the parent container, only then it will appear.
and then give appropriate padding to the h2 element, to make the text appear in the middle.
set h2 like this:
h2 {
margin: 0;
z-index: 1;
padding-top:20%;
line-height: 0;
position: absolute;
top: 0%;
left: 0;
width: 100%;
text-align: center;
vertical-align:middle;
height:100%;
opacity:0;
}
and set your h2:hover like this:
h2:hover
{
padding-top:20%;
color:white;
background-color:Black;
opacity:0.6;
-webkit-transition: opacity 0.25s, background-color 0.25s;
-o-transition: opacity 0.25s, background-color 0.25s;
-moz-transition: opacity 0.25s, background-color 0.25s;
-ms-transition: opacity 0.25s, background-color 0.25s;
-kthtml-transition: opacity 0.25s, background-color 0.25s;
transition: opacity 0.25s, background-color 0.25s;
}
see this fiddle
So, I solved the question by doing it like this:
HTML
<article>
<div class="item">
<h2>Title</h2>
<img src="http://placehold.it/350x150" />
</div>
</article>
CSS
article {
overflow: hidden;
}
h2 {
font-weight: normal;
z-index: 2;
line-height: 0;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
left: 0;
margin: 0;
padding: 0;
color: rgba(255,255,255,0);
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.title {
display: inline-block;
position: absolute;
overflow: hidden;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
text-decoration: none;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.title:hover {
text-decoration: none;
}
.item {
display: inline-block;
position: relative;
max-width: 100%;
}
.item:hover .title {
background: rgba(0,0,0,0.6);
}
.item:hover h2 {
color: rgba(255,255,255,1);
}
img {
border: 0;
vertical-align: top;
max-width: 100%;
}
See this fiddle. That way it's dynamic (the image is fluid and there are no fixed heights or widths to it) and the headline is automatically centered vertically and horizontally.