I have two images inside of a div
<div class="my_div">
<img src="1.jpg" />
<img src="2.jpg" />
</div>
I have tried following css
.my_div img:nth-child(2) { margin-top:130px; }
But this doesn't work? Any idea why?
use display: inherit; on .my_div img:nth-child(2)
.my_div img:nth-child(2) {
margin-top:130px;
display: inherit;
}
<div class="my_div">
<img src="1.jpg" />
<img src="2.jpg" />
</div>
Related
i have 4 different icons and based on which icon i hover i want to change the background image in a div. The html is like so
<div class="col side">
<i id="icon1"></i>
<i id="icon2"></i>
<i id="icon3"></i>
<i id="icon4"></i>
</div>
<div class="col">
<img src="img1" id="img1" class="content" alt="" />
<img src="img2" id="img2" class="content" alt="" />
<img src="img3" id="img3" class="content" alt="" />
<img src="img4" id="img4" class="content" alt="" />
</div>
So when i hover icon1 i want to display img1 and so on. I know how to do it with jquery/javascript but is it possible with pure css?
it is not possible but try with adding background image on hover to each icon
#icon1:hover
{
background: url("path to img1");
}
like wise add this to all icons but i think it will result in bad alignment on hover
You can try some thing like
.content {
display: none;
}
#icon1:hover + #img1{
display: block; // or inline-block
}
#icon2:hover + #img2{
display: block;
}
#icon3:hover + #img3{
display: block;
}
#icon4:hover + #img4{
display: block;
}
It can be done with changed html-structure as someone has already mentioned in the comments. For example,
.content {
display: none;
}
#icon1:hover ~ .col img#img1 {
display: block;
}
#icon2:hover ~ .col img#img2 {
display: block;
}
<div class="col side">
<i id="icon1">First Icon</i> <i id="icon2">Second Icon</i>
<div>Images:</div>
<div class="col">
<img src="https://themcrazycats.files.wordpress.com/2020/11/1ce50-b8480db4-5bda-4912-84e4-3f8d79cae545.jpeg?w=400&h=200&crop=1" id="img1" class="content" alt="" />
<img src="https://themcrazycats.files.wordpress.com/2020/11/a66f0-4c055b18-860a-46b6-95a2-967b72e3547b.jpeg?w=400&h=200&crop=1" id="img2" class="content" alt="" />
</div>
</div>
The key here is to make possible usage of css ~ selector by placing .col inside .side. Why? There is no parent selector as of now in css as pointed out here.
I have a problem with CSS.
.special-banner{
width: 100vw;
position: relative;
}
.special-banner > img{
width: 100%;
height: 100%;
}
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_01_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_02_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_03_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_04_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_05_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_06_renew.png"/>
</div>
As you can see, there are some White line.
I want to remove them.
Also, I have 1 solution.
Using display: flex.
It's efficient but I can't use that.
Do you have another solution?
I guess it causes with display:block..
I don't know if you added display:block or not, but putting it in the img style removes the white line
.special-banner {
width: 100vw;
position: relative;
}
.special-banner>img {
width: 100%;
height: 100%;
display: block;
}
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_01_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_02_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_03_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_04_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_05_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_06_renew.png" />
</div>
try applying float:left for .special-banner and .special-banner > img
.special-banner,.special-banner > img{
float: left;
}
I have two questions
1) How can I remove a y-scrollbar.
2) How can I make images scroll to the left instead of down?
Any advise? Any help is much appreciated.
Here is my example:
HTML
<div class="ProjectGallery">
<img src="images/Thumb/10.jpg" data-title="<?=$title10?>" />
<img src="images/Thumb/11.jpg" data-title="<?=$title11?>" />
<img src="images/Thumb/12.jpg" data-title="<?=$title12?>" />
<img src="images/Thumb/14.jpg" data-title="<?=$title14?>" />
<img src="images/Thumb/15.jpg" data-title="<?=$title15?>" />
<img src="images/Thumb/17.jpg" data-title="<?=$title17?>" />
<img src="images/Thumb/18.jpg" data-title="<?=$title18?>" />
</div>
CSS
.ProjectGallery{height:300px;overflow:scroll;float:left;}
.ProjectGallery img{float:left;width:100%;height:100px;}
<div class="gallery-container">
<div class="gallery">
<div class="thumbnails">
<img src="images.png"/>
<img src="images.png"/>
<img src="images.png"/>
<img src="images.png"/>
<img src="images.png"/>
<img src="images.png"/>
</div>
</div>
</div>
.gallery
{
border: 1px solid black;
height: 120px;
width: 200px;
overflow: hidden;
overflow-x: scroll;
}
.thumbnails
{
width: 1000px;
}
.gallery-container img
{
width: 200px;
height: auto;
}
.thumbnails img
{
width: auto;
height: 100px;
display: block;
float: left;
border: 1px solid #ddd;
margin: 1px;
}
try this
Try this
HTML
<div class="ProjectGallery">
<img src="images/Thumb/10.jpg" data-title="<?=$title10?>" />
<img src="images/Thumb/11.jpg" data-title="<?=$title11?>" />
<img src="images/Thumb/12.jpg" data-title="<?=$title12?>" />
<img src="images/Thumb/14.jpg" data-title="<?=$title14?>" />
<img src="images/Thumb/15.jpg" data-title="<?=$title15?>" />
<img src="images/Thumb/17.jpg" data-title="<?=$title17?>" />
<img src="images/Thumb/18.jpg" data-title="<?=$title18?>" />
</div>
CSS
.ProjectGallery{height:300px;overflow:scroll;white-space:nowrap}
.ProjectGallery img{width:100%;height:100px;display:inline;}
I have seen many different ways to resolve the following, but it does not work quite as I hoped...
I need to make a div (main div) with severel divs inside (item-divs).
Each item-div must show a different picture, but when I hover a certain picture, this picture should be hidden and a text showen instead - in the same div.
How on earth can I make this?
For example this variant:
<div class="wrap">
<div class="child1"></div>
<div class="child2"></div>
</div>
And your css chould be:
.wrap:hover > child2{
opacity: 0;
}
But static styles should be like this:
.wrap{
width: 200px;
height: 300px; /* maybe auto if you want */
position: relative;
}
.child1{
width: 100%;
height: 100%;
background: lightgreen;
}
.child2{
width: 100%;
height: 100%;
background: #ff3030; /* surely for example */
position: absolute;
top: 0;
left: 0;
}
/* and this block .child2 will be faced. When it's opacity will be 0, you get your effect */
You can do this with the CSS pseudo element :hover
See example:
http://jsbin.com/vijawuda/1/edit?html,css,output
HTML Markup:
<div class='outer-container'>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 1
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 2
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 3
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 4
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 5
</div>
</div>
</div>
CSS
.image-holder {
width: 150px;
height: 150px;
display: inline-block;
}
.image-holder > .text {
visibility: hidden;
width: 150px;
height: 150px;
}
.image-holder:hover img {
visibility: hidden;
}
.image-holder:hover .text {
visibility: visible;
}
HTML
<div class="main">
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
</div>
CSS
.main {
width: 1000px;
height: 200px;
}
.content {
width: 150px;
height: 150px;
background-color:#c80000;
color:#fff;
font-family:arial;
text-align:center;
float:left;
margin-left: 10px;
font-size: 20px;
cursor:pointer;
}
.content > div.maincontent + div {
display:none;
padding-top:50px;
}
.content:hover > div.maincontent {
display:none;
}
.content:hover > div.maincontent + div {
display:block;
}
http://jsfiddle.net/q92zL/4/
I have two images that need to kept inline; I want to write a caption under each image.
<center>
<a href="http://example.com/hello">
<img src="hello.png" width="100px" height="100px">
</a>
<a href="http://example.com/hi">
<img src="hi.png" width="100px" height="100px">
</a>
</center>
How can I implement?
Figure and Figcaption tags:
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
Gotta love HTML5.
See sample
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
<div id="container">
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<figcaption>First image</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<figcaption>Second image</figcaption>
</figure>
</a>
</div>
CSS
#images{
text-align:center;
margin:50px auto;
}
#images a{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;
}
HTML
<div id="images">
<a href="http://xyz.com/hello">
<img src="hello.png" width="100px" height="100px">
<div class="caption">Caption 1</div>
</a>
<a href="http://xyz.com/hi">
<img src="hi.png" width="100px" height="100px">
<div class="caption">Caption 2</div>
</a>
</div>
A fiddle is here.
For responsive images. You can add the picture and source tags within the figure tag.
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
<source media="(min-width: 500px)" srcset="images/image.jpg" />
<img src="images.jpg" alt="An image">
</picture>
<figcaption>Caption goes here</figcaption>
</figure>
Put the image — let's say it's width is 140px — inside of a link:
<a><img src='image link' style='width: 140px'></a>
Next, put the caption in a and give it a width less than your image, while centering it:
<a>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
Next, in the link tag, style the link so that it no longer looks like a link. You can give it any color you want, but just remove any text decoration your links may carry.
<a style='text-decoration: none; color: orange;'>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
I wrapped the image with it's caption in a link so that no text could push the caption out of the way: The caption is tied to the picture by the link. Here's an example: http://www.alphaeducational.com/p/okay.html
<div style="margin: 0 auto; text-align: center; overflow: hidden;">
<div style="float: left;">
<img src="hello.png" width="100px" height="100px">
caption 1
</div>
<div style="float: left;">
<img src="hi.png" width="100px" height="100px">
caption 2
</div>
</div>
CSS is your friend; there is no need for the center tag (not to mention it is quite depreciated) nor the excessive non-breaking spaces. Here is a simple example:
CSS
.images {
text-align:center;
}
.images img {
width:100px;
height:100px;
}
.images div {
width:100px;
text-align:center;
}
.images div span {
display:block;
}
.margin_right {
margin-right:50px;
}
.float {
float:left;
}
.clear {
clear:both;
height:0;
width:0;
}
HTML
<div class="images">
<div class="float margin_right">
<img src="hello.png" width="100px" height="100px" />
<span>This is some text</span>
</div>
<div class="float">
<img src="hi.png" width="100px" height="100px" />
<span>And some more text</span>
</div>
<span class="clear"></span>
</div>
To be more semantically correct and answer the OPs orginal question about aligning them side by side I would use this:
HTML
<div class="items">
<figure>
<img src="hello.png" width="100px" height="100px">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="hi.png" width="100px" height="100px">
<figcaption>Caption 2</figcaption>
</figure></div>
CSS
.items{
text-align:center;
margin:50px auto;}
.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}
https://jsfiddle.net/c7borg/jLzc6h72/3/
The <figcaption> tag in HTML5 allows you to enter text to your image for example:
<figcaption>
Your text here
</figcaption>.
You can then use CSS to position the text where it should be on the image.
<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>
Style as desired.