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;}
Related
I know there are several threads on the "overlapping images" topic, but I can't find one that addresses my specific problem.
I have five circular images and I need to display them with slight overlap, kind of like how a deck of cards looks when it's laid out in a fan.
Here is what it should look like:
Here is what I currently have:
All the code examples I've found are aimed at overlapping two square images and I can't figure out how to translate to this scenario. Any help would be greatly appreciated.
I've tried messing around with grid layout and negative margins, but it was just a huge mess.
I can't share the source code but I've recreated the exact same HTML/CSS with dummy data in this codepen.
Code:
.main-container {
height: fit-content;
padding-top: 3rem;
}
#icons-container {
display: flex;
position: relative;
justify-content: center;
}
.icon {
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid white;
}
<div class="main-container">
<div id="icons-container">
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon1" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon2" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon3" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon4" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon5" />
</div>
</div>
</div>
You can use margin-right/margin-left on the icon . To overlap, let margin-right have negative values
.main-container {
height: fit-content;
padding-top: 3rem;
}
#icons-container {
display: flex;
position: relative;
justify-content: center;
}
.icon {
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid white;
margin-right: -15px;
}
<div class="main-container">
<div id="icons-container">
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon1">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon2">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon3">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon4">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon5">
</div>
</div>
</div>
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I got code like this
.divA {
background: red;
width: 500px;
display: flex;
flex-direction: row;
overflow-y: scroll;
}
.epi {
width: 50%;
background: blue;
}
<div class="divA">
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
</div>
I'm expecting this
But I'm getting this
I want item in .divA has the width of 50% of .divA
Edit: Since you don't want it to wrap, but scroll horizontally, you can put it as overflow-x: scroll;
.divA {
background: red;
width: 500px;
display: flex;
justify-content: flex-start;
overflow-x: scroll;
overflow-y: auto;
}
.epi {
min-width: 50%;
background: blue;
}
<div class="divA">
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
</div>
I'm trying to rotate images by 30 degrees and maintain equal margins between.
The desired result looks like a brick layout:
I am starting out with a wrapped flex layout:
And adding a 30deg rotation:
But notice the unevenness.
Here's the CSS:
.img-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
.img-item {
flex: 0 0 50%;
#media #{$tablet} { & { flex: 0 0 25%; } }
#media #{$desktop} { & { flex: 0 0 20%; } }
/** padding for the gutters when using flexbox **/
padding: 5px 10px;
/** Transformation here
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
/* chop off according to media queries - based off of 15 results*/
&:last-child {
display: none;
}
&:nth-last-child(-n+3) {
#media #{$tablet} { & { display: none; } }
#media #{$desktop} { & { display: initial; } }
}
.img {
object-fit: contain;
max-width: 100%;
}
}
}
HTML
<div class="img-container">
<div class="img-item">
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
</div>
</div>=
I tried using CSS grids too, but had similar lack of interlocking brick layout and same vertical gutters and lack of horizontal gutters.
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'm trying to add some hover effect on some images I got.
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
</div>
When I hover the div with the overlay class I want another image to hover on top of the imagetag..
I've got the following css:
#horizontal_list{
margin-top: 18px;
height: 330px;
}
.grid_3{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.first{
margin-left: 0px !important;
}
.last{
margin-right: 0px !important;
}
.overlay{
height: 330px;
}
.overlay:hover{
background: url('path') no-repeat;
}
I'm not sure what you mean by 'imagetag' but here is what I think you mean:
What you can do, is adding the second image in your html:
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
</div>
And in your CSS:
.overlay {position: relative;}
.overlay:hover a img.sec_img {display: none;}
.overlay:hover a img.sec_img {
display: block;
position: absolute;
background: url(path) no-repeat;
top: 0;
left: 0;
width: [imgwidth]px;
height: [imgheight]px;
}
Be sure to change [imgwidth] and [imgheight] into the correct dimensions.
HTML
<div class="hoverholder">
<a href="#" class="picone">
<img src="#" alt="" />
</a>
<a href="#" class="pictwo">
<img src="#" alt="" />
</a>
</div>
CSS
.pictwo {display:none;}
.hoverholder:hover .picone{
display:none;
}
.hoverholder:hover .pictwo{
display:block;
}