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.
Related
So I´m having trouble fitting 3 images in the same row ,
The thing is, that this images are not always the same so when I upload an image that its has a diferrent size everything moves., Any advise to achieve this ? thanks
HTML:
<div class="first-slot">
<div class="masonry-box post-media">
<img src="upload/'.$row['fotos'].'" alt="" class="img-fluid">
<div class="shadoweffect">
<div class="shadow-desc">
<div class="blog-meta">
<span class="bg-orange">'.$row['categoria'].'</span>
<h4>'.$row['titulo'].'</h4>
<small>'.$row['fecha'].'</small>
<small>'.$row['autor'].'</small>
</div>
</div>
</div>
</div>
</div>
CSS:
.first-slot {
float: left;
width: 65%;
height: 35%;
}
.last-slot,
.second-slot {
float: left;
width: 35%;
height: 28%;
}
Bootstrap
.img-fluid {
max-width: 100%;
height: auto;
}
I think this will solve your problem. You can use these class names and css in you code. Change image src locations according to your requirements. And change margin attribute in css according to your need.
PS: dnt forget to include bootstrap link in your project file
.imgItem{
display: inline-block;
margin: 10px;
}
.imgContainer{
display: flex;
}
<div class="row">
<div class="col imgContainer" >
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
</div>
</div>
This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;
Used this code around every image
<div class="side-by-side"> <a href="http://example.com ....> (include ALL the code for the image here) </div>
This is the CSS snippet
.side-by-side { float: left; margin-right: 5px }
It works... I mean images are on one line
But unfortunately the images align left, and I want them centered, all together.
Wrap your images in a div and set the text-align:center; then you dont need the extra div to wrap your a tags in you can just style the a tag itself. Like so:
<div class="centered-content">
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
</div>
And Css:
.centered-content{
text-align:center;
}
.side-by-side{
margin-right:5px;
display:inline-block;
}
I would use Flexbox to do it. Wrap your div in a container
<div class="container">
<div class="side-by-side">
</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
My logo image look like this on mobile:
I want it to be automatically smaller so i added this css:
img {
display: inline-block;
height: auto;
max-width: 100%;
<div class="container">
<div class="row">
<div class="col-lg-12 text-center img-responsive">
<img src="http://placehold.it/600x140" alt="logo" style="margin-bottom: 30px;" />
</div>
But it does not work, can someone help me ?
If you want your image responsive with bootstrap, you have to apply the class directly in the image
<img class="img-responsive" src="http://placehold.it/600x140" alt="logo" style="margin-bottom: 30px;" />
HTML :
<a href="">
<img class="center" src="">
</a>
CSS :
.center { display: block; margin: 0 auto; }
That centers the image, but the problem is any extra white-space around the image is also clickable. Is there a way to fix that?
(Images vary in size)
You could just wrap a div around it and center the that div rather than the image itself.
<div class="center">
<a href="">
<img src="">
</a>
</div>
And then add a style definition for the div.
.center { margin: 0 auto; }
The only option I see would be putting the anchor in a div (non -clickable, with the size and style of your current anchor) and sizing the anchor based on the image:
HTML:
<div class="container">
<a href="" class="anchor">
<img src="http://placehold.it/350x150" />
</a>
</div>
CSS:
.container {
width: 100%;
text-align:center;
}
JSFIDDLE:
http://jsfiddle.net/Atumra/0jncgxkb/
How about doing this
<a href="" class="center">
<img src="">
</a>