I have a container which has three divs. Each div contains a hidden div which has a 'hide' class (display:none;) inside which is supposed to show when hovering on its parent div.
I use toggleClass('show') to which makes the secretDiv display has a block. I need the secretDiv to be shown when hovering on the parent div.
The parent div should show on top of the div below, and not push the other divs
http://jsfiddle.net/2xLMQ/4/
--- HTML ---
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
--- CSS ---
.hide {display:none;}
.show {display:block;}
.row {height:160px;background:#dedede;float:left;width:480px;position:relative:z-index:1;}
.row .element {position:relative;z-index:9;text-align:center; float:left; background:#666;width:200px;padding:12px;margin:6px;}
.row .image {}
.row .secretDiv {background:#ff0000;padding:8px;}
--- JS ---
$('.element').hover(function(){
$('.element .secretDiv').toggleClass('show');
});
First at all change your selector to only match the respective hidden div:
$('.secretDiv',this).toggleClass('show');
Then add another class on that item to display ontop of the others :
$(this).toggleClass('ontop');
And the class:
.row .ontop {z-index:10;background:orange;}
Check this Demo
Simply add absolute positioning to your 'secret' div:
.row .secretDiv {background:#ff0000;padding:8px; position: absolute; top: 5px; left: 5px;}
Fiddle here: http://jsfiddle.net/moonspace/2xLMQ/12/
As a bonus, I've edited your jQuery to show only the 'secret' div associated with each element:
$('.secretDiv', this).toggleClass('show');
Related
I am trying to align my text under a line of 3 images using HTML/CSS. As
soon as i remove my comments it aligns everything vertically.
<div class="inline">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
</div>
See my example https://jsfiddle.net/gvrr25bk/1/
Thanks in advance!
Ivan
you could wrap each img with it's p inside a div and add display:inline-block to that div instead
.inline {
text-align: center;
}
.wrap {
display: inline-block;
margin: 0 2%;
}
<div class="inline">
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
</div>
see more here CSS align and here CSS inline-block or in general about css CSS w3schools
about HTML blocks and inline elements see here HTML Block and Inline Elements
the idea to the solution i gave you is that if you want the image to stay together with it's text , you should put them in the same container separately. in that way they will always stay together as you want.
I need to align the play button image in the center of another image.
The example that I have is breaking when titles are long.
How can we align blue color image exactly over the large image
Fiddle
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
</div>
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
<div class="video-details-wrapper"> <span>this is video short video title</span>
Just put your play-item-wrapper inside the container video-image-wrapper and add a relative positioning on it.
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
</div>
<div class="video-details-wrapper">
<span>this is video short video title</span>
</div>
</div>
And in CSS
.video-image-wrapper { position: relative; }
JSFiddle: https://jsfiddle.net/L51bd8vr/
I've tried #logos img:first-child{} to try and format my top img a little different from the rest but it just doesn't work. Can anyone help me figure out why?
<div id="logos" name="logos">
<div class="container">
<div class="row">
<br>
<h1 class="centered">SHOWS</h1>
<img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">
<hr>
</div><!-- end row -->
<div class="row">
<div class="col-lg-6">
<img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px" height="300px">
</div>
<div class="col-lg-6">
<img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
</div>
</div><!-- end row -->
</div>
</div>
The first-child pseudo-selector selects any element which is the first child of its parent. In your example, in the first .row div, the h1 "SHOWS" is the first element and your img is the second element. So it doesn't get selected. In contrast, in the other div, both img tags are the first child of their parent, so they do get selected.
In other words, img:first-child doesn't select the first img tag, it selects the img tag which is the first child of its parent. If it has a previous sibling, then first-child doesn't apply.
We can fix your code by instead putting the first-child on .row so that the img in the first row div is selected, which also happens to be the first image.
#logos .row:first-child img {
border: 1px solid blue;
}
<div id="logos" name="logos">
<div class="container">
<div class="row">
<br>
<h1 class="centered">SHOWS</h1>
<img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">
<hr>
</div> <!-- end row -->
<div class="row">
<div class="col-lg-6">
<img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px" height="300px">
</div>
<div class="col-lg-6">
<img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
</div>
</div> <!-- end row -->
</div>
</div>
:first-child / :last-child required any list in one section, but in your code img wrapped with div so try to add :first-child on just parent div, see below sample code
#logos .row:first-child img{}
Try this:-
#logos .row:first-child img{
}
Another option could be first-of-type
try #logos img:first-of-type{}
I am a newb. I have finally figured out how to get images aligned on my main page in my index.html along with code in my default.css.
Now I would like to add text under each image. I know this should be easy, but am not able to find anything that seems to work.
Here is my HTML Code:
<div id="random">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
Here is my CSS code:
#random{
max-width: 650px
}
#random img{
display:inline-block;
width:80px;
}
Wrap your images in a container, and put the text under them. Something like this:
http://jsfiddle.net/8xf2N/1/
<div id="random">
<div class='img-container'>
<img src="1.jpg" />
<p>Image One</p>
</div>
<div class='img-container'>
<img src="2.jpg" />
<p>Image Two</p>
</div>
<div class='img-container'>
<img src="3.jpg" />
<p> Image Three</p>
</div>
</div>
CSS:
#random{
max-width: 650px
}
#random img{
width:80px;
}
.img-container{
display: inline-block;
}
You can always use the HTML 5 figure tag. (Assuming your website is follwoing HTML 5 standards). That way, you can nest a tag and style them.
<div id="random>
<figure>
<img src="1.jpg"/>
<figcaption>Your Caption</figcaption>
</figure>
</div>
That way you have selectors to style them with CSS as well.
Try:
#random{
max-width: 650px
}
#random .image-wrap{
display:inline-block;
width:80px;
}
<div id="random">
<div class="image-wrap">
<img src="1.jpg" />
<p>Text for image 1</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
</div>
You should wrap the images in a div. Here is a fiddle http://jsfiddle.net/a6pNw/
CSS:
#random{
max-width: 650px
}
#random div{
display:inline-block;
width:80px;
text-align:center;
}
HTML:
<div id="random">
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
So I have html layout as this one:
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" />
<div class="summary">Short summary</div>
How to display it as:
<img src="image.jpg" /> <h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with floats however it displayed as:
<h1>Title</h1>
<img src="image.jpg" /> <div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with positions (relative and absolute) and I got what I wanted, unfortunately it doesn't work very well in IE and if the short summary text is very short then image hides behind the other elements. I don't know image height (dynamic height), so height: xxx px; doesn't fit here.
Any help would be great.
EDIT:
I can't div wrap all (right side) elements in this case.
To get it done without adding additional divs to your code, add the below CSS
img{float:left}
div{display:table-row}
DEMO 2
Use position:absolute
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" width="40" />
<div class="summary">Short summary</div>
CSS
img{float:left; top:0; position:absolute; left:0}
div, h1{display:block; margin-left:40px /*Add image width value as margin-left*/ }
DEMO 3
<img src="image.jpg" class="left-image" />
<div class="right-col">
<h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
</div>
CSS
.left-image {
float: left;
}
.right-col {
margin-left: <width-of-image> px;
}
how about this: http://jsfiddle.net/xpq2m/
CSS
body {
padding-left: 100px;
}
img#s {
position: absolute;
top: 0;
left: 0;
}