So, I have the same image that I need to overlap each other. The first one as you can see has an z-index:1 and the others of 0. But, as the images keep repeating I have to keep creating a new style to make the next one 115px to the right. Is there a css pseudo method to automate this or do I have to revert to using jquery or js to bump it to the right?
<style>
img.overlap{z-index:1;position:absolute;left:670px;}
img.underlap{z-index:0;position:absolute; left:785px;}
</style>
<div class="span12">
<img src="img/blue_btn.png" alt="Home" class="overlap"/>
<img src="img/blue_btn.png" alt="About" class="underlap"/>
<img src="img/blue_btn.png" alt="Services" class="underlap"/>
<img src="img/blue_btn.png" alt="Portfolio" class="underlap"/>
<img src="img/blue_btn.png" alt="Blog" class="underlap"/>
<img src="img/blue_btn.png" alt="Contact" class="underlap"/>
</div>
UPDATE: I was cropping the image as I read this post as I knew that it would be hard to visualize. Here is the nav area. I have cropped the first one and I will repeat them and later change the alpha with jquery.
http://weslice.com/images/nav_complete.jpg
You should try using float and margins instead of absolute positioning.
http://www.w3schools.com/css/css_float.asp
How about using display : inline-block to get your elements to sit next to each-other, then use margin : -*px to overlap the elements:
.span12 a {
display : inline-block;
margin : 0 0 0 -20px;/*this margin is responsible for the overlap between elements*/
/*IE 6&7 Compatibility*/
*display : inline;/*only read by IE7*/
zoom : 1;/*give the element the `hasLayout` property since you can't give it to an element directly*/
_height : 50px;/*only read by IE6, but is necessary to specify a height for IE6*/
}
Here is a demo: http://jsfiddle.net/WJKS5/2/
Update
To stack the element from left to right instead of right to left:
.span12 a {
float : right;
margin : 0 -10px 0 0;/*this margin is responsible for the overlap between elements*/
}
Here is a demo: http://jsfiddle.net/WJKS5/4/
I think this fiddle http://jsfiddle.net/2vUzp/9/ achieves the effect without the need for classes (though it does reverse the order of the menu in the html, but not in what is displayed to the average user). After looking at your sample image, you may not want the "hover" effect in my example, but that can be removed.
CSS
.span12 {
float: left;
}
.span12 a {
position: relative;
margin-right: -30px;
display: block;
float: right;
}
.span12 a:first-child {
margin-right: 0;
}
.span12 a:hover {
z-index: 1;
}
.span12 img { /*for demo*/
display: block;
width: 100px;
height: 20px;
border: 1px solid blue;
background-color: cyan;
}
HTML
<div class="span12">
<img src="img/blue_btn.png" alt="Contact"/>
<img src="img/blue_btn.png" alt="Blog"/>
<img src="img/blue_btn.png" alt="Portfolio"/>
<img src="img/blue_btn.png" alt="Services"/>
<img src="img/blue_btn.png" alt="About" />
<img src="img/blue_btn.png" alt="Home" />
</div>
Since you are trying to accomplish an overlap, floating's probably not going to work. I would recommend you use CSS sibling selectors and write rules specifically for 'img', 'img + img', 'img + img + img', etc. that would increase incrementally. I think that should be the only pure CSS way around it. Doing this with JavaScript would be a breeze.
Related
I have this image gallery which I want to do without the javascript. Can this be done without using the javascript ?? Just need the big picture to change when mouseover or something similar.
function myFunction(imgs) {
var expandImg = document.getElementById('expandedImg')
var imgText = document.getElementById('imgtext')
expandImg.src = imgs.src
imgText.innerHTML = imgs.alt
expandImg.parentElement.style.display = 'block'
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: '';
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<div style="text-align: center">
<h2>Tabbed Image Gallery</h2>
<p>Click on the images below:</p>
</div>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="img_nature.jpg" alt="Nature" style="width: 100%" onclick="myFunction(this);" />
</div>
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width: 100%" onclick="myFunction(this);" />
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width: 100%" onclick="myFunction(this);" />
</div>
<div class="column">
<img src="img_lights.jpg" alt="Lights" style="width: 100%" onclick="myFunction(this);" />
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span
>
<img id="expandedImg" style="width: 100%" />
<div id="imgtext"></div>
</div>
Any help is appreciated. Sorry for adding this text as StackOverflow won't let me post this without adding more text.
Thanks in advance.
Preface
Though not impossible, I nonetheless highly recommend using JavaScript instead of CSS for this task. You should not see the following content of this answer as an alternative to JavaScript's intended purpose, but see this as a playful "solution".
Another big point to use JavaScript instead of CSS is: Using CSS for this task is not accessible at all. You should always strive to make good, easy-to-use and accessible websites.
You should especially refrain from using this in a business environment for the aforementioned reason.
CSS-only solution
Necessary HTML changes
Since CSS is cascading, the image-previews need to come before either the big image itself or its ancestor. You can imagine this like this: The HTML is a tree, and effects are only carried through down to the leaves, but cannot affect neighbouring branches as that would require backtracking at some point.
In code, this could look like this:
<!-- Either this (case 1): -->
<img class="img-preview">
<img class="big-img">
<!-- Or this (case 2): -->
<img class="img-preview">
<div>
<img class="big-img"> <!-- May be nested deeper -->
</div>
The CSS
The CSS should be relatively simple. The only issue is, that for each image-preview, a new CSS-rule needs to be added. This makes adding a new image-preview a bit more work in the future, but more importantly: It crams your CSS full with unnecessary rules! This will probably result in unused CSS-rules in case you'll rewrite some, and will hinder maintenance and readability heavily.
Friendly reminder: This should better be done by using JavaScript!
CSS' :hover-pseudo-class is effectively the same as JS' mouseover. Using this and the general sibling-combinator ~ (and potentially the descendant combinator ), we can override the big image's background-image-property depending on the image-preview that is hovered:
/* Either this (case 1): */
.img-preview:hover~.big-img {/* ... */}
/* Or this (case 2): */
.img-preview:hover~* .big-img {/* ... */}
As I have already mentioned, every image-preview requires its own CSS-rule. This is because CSS cannot use HTML-attributes for its properties (except for pseudo-elements and their content-property, I think).
This means, the CSS could look like this for the current HTML:
/* The CSS */
.img-preview[data-src="https://picsum.photos/id/10/64/64"]:hover~.big-img {
background-image: url("https://picsum.photos/id/10/64/64");
}
.img-preview[data-src="https://picsum.photos/id/1002/64/64"]:hover~.big-img {
background-image: url("https://picsum.photos/id/1002/64/64");
}
/* etc. */
/* Ignore; for styling only */
img {border: 1px solid black}
.img-preview {
width: 2rem;
height: 2rem;
}
.big-img {
width: 4rem;
height: 4rem;
}
<img class="img-preview"
src="https://picsum.photos/id/10/32/32"
data-src="https://picsum.photos/id/10/64/64">
<img class="img-preview"
src="https://picsum.photos/id/1002/32/32"
data-src="https://picsum.photos/id/1002/64/64">
<!-- etc. -->
<img class="big-img">
(Sidenote: I used attribute-selectors here, but the same thing could be done using IDs or similar, as long as every image-preview can be selected individually.)
Endnote
Adding text-descriptions while hovering may be solved in a similar fashion, but is left as a task.
Unfortunately, the big image won't stay when using this approach. If you want it to stay, you should take a look at Abd Elbeltaji's answer. They use <input>- and <label>-tags to accomplish that, together with CSS' :checked-pseudo-class.
Despite looking so, changing the HTML as shown does not restrict you in how you can style your elements, especially when using FlexBox or CSS Grid. Not only do they make styling easier, they are also meant to easily make a website responsive.
Accessibility
Again: This is not an accessible solution! This whole task should certainly be handled by JavaScript.
Should this be a public website, then I advise adding alt-descriptions for every image, even the previews. Unfortunately updating the big image's alt-attribute via CSS is impossible, making it inaccessible, which in turn harms your SEO. This being said, I commend your effort in displaying the image's alt-attribute in your original code, though not perfect. You might want to take a look at <figure>.
While we're at it: I'd also advise learning some semantic HTML-tags for the purpose of accessibility.
Pseudo-elements (::after, ::before, etc.) are also inaccessible. You should not use them to contain any relevant information/text. Though they may be used for styling-purposes in every imaginable way.
Yes, you can achieve the same behavior without the use of javascript, you may use the concept of input elements (checkbox for single toggle value, radio for multiple select values) as adjacent siblings to your elements that they should be affected of the input, and by utilizing the :checked pseudo selector for inputs in css, in a compination with the adjacent sibling selector ~ you can affect the desired elements when the input is checked. You can also use labels which will allow you to hide your inputs and trigger their values with whatever is inside your label.
// No JS!
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
}
/* Expanding image text */
#imgtext::after {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.container .img {
height: 500px;
width: 100%;
background-image: url(https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
}
/* Tab select */
input[name=tabSelect],
#hideImage {
display: none;
}
#tabSelect1:checked~div.container .img {
background-image: url(https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
#tabSelect2:checked~div.container .img {
background-image: url(https://images.pexels.com/photos/869258/pexels-photo-869258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
#tabSelect3:checked~div.container .img {
background-image: url(https://images.pexels.com/photos/1183021/pexels-photo-1183021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
#tabSelect4:checked~div.container .img {
background-image: url(https://images.pexels.com/photos/1124960/pexels-photo-1124960.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
#tabSelect1:checked~div.container #imgtext::after {
content: "Nature";
}
#tabSelect2:checked~div.container #imgtext::after {
content: "Snow";
}
#tabSelect3:checked~div.container #imgtext::after {
content: "Mountains";
}
#tabSelect4:checked~div.container #imgtext::after {
content: "Lights";
}
/* image hide btn */
#hideImage:checked~div.container {
display: none;
}
<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p>Click on the images below:</p>
</div>
<input type="radio" name="tabSelect" id="tabSelect1">
<input type="radio" name="tabSelect" id="tabSelect2">
<input type="radio" name="tabSelect" id="tabSelect3">
<input type="radio" name="tabSelect" id="tabSelect4">
<!-- The four columns -->
<div class="row">
<div class="column">
<label for="tabSelect1">
<img src="https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Nature" style="width:100%">
</label>
</div>
<div class="column">
<label for="tabSelect2">
<img src="https://images.pexels.com/photos/869258/pexels-photo-869258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Snow" style="width:100%">
</label>
</div>
<div class="column">
<label for="tabSelect3">
<img src="https://images.pexels.com/photos/1183021/pexels-photo-1183021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Mountains" style="width:100%">
</label>
</div>
<div class="column">
<label for="tabSelect4">
<img src="https://images.pexels.com/photos/1124960/pexels-photo-1124960.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Lights" style="width:100%">
</label>
</div>
</div>
<input type="checkbox" id="hideImage">
<div class="container">
<label for="hideImage" class="closebtn">×</label>
<div class="img"></div>
<div id="imgtext"></div>
</div>
Here is a working example in: JSFiddle
Note! this approach is not optimal and would be tricky to expand in case you need to add more values.
PS: I had to change the images since the ones provided in your code do not exist.
I am trying to reduce the thumbnail's height without stretching the image. Despite I wrote my code in React I know is pure CSS.
For example, I used a sample screenshot from Wikipedia, its height is too large to fit "in a thumbnail" so I need to reduce it so a JavaScript library can autoscroll it when hover event is triggered (but this is a future step).
The following image is how the thumbnail should look like:
Instead it displays the whole image, as you can see below:
.image {
width: 200px;
}
.image-link {
height: 400px;
overflow: hidden;
}
<a class="image-link" href="#">
<img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="image" />
</a>
So, how can I reduce the image's height without stretching it or overflowing the a?
Add display: block; (or inline-block, depending on the situation) to the class of the a tag, otherwise it's an inline element on which your height setting (and with it the overflow: hidden) won't have any effect:
.image {
width: 200px;
}
.image-link {
display: block;
height: 400px;
overflow: hidden;
}
<a class="image-link" href="#">
<img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="image" />
</a>
I found this answer:
( Overflow: hidden is not working with images ).
You need to add a wrapper element with all scaled images contained as the thing that is affected by overflow.
The images can then be adjusted in relation to that wrapper class.
.image {
width:200px;
height:200px;
overflow: hidden;
}
.image-link {
width: 400px;
height:400px;
background-color:red;
}
.imageScale{
width:200px;
}
<a class="image-link" href="#">
<div class="image">
<img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="imageScale" />
</div>
</a>
Not sure if my question explains this well.
I have a website and need to display all of my images in a gallery. The problem that is that I have 2 types of image sizes which are consistent.
1) - 1200 x 1800 px
2) - 1200 x 800 px
I want my gallery to look similar to this:
And when you click the image they open up as their full size. I can do this part and make them open as full size, but my problem is trying to get these two different size images look right in the box layout.
When using 1 size I could make them a fixed width and height and then just hide the overlay to make them all square shaped. However when i introduced the other image size into the mix , images begin to look stretched.
Does anyone know how I can achieve this using either pure CSS or Javascript/jQuery?
Try to add
#your_gallery img {
max-width: 30%;
margin: 15px 1.5%;
min-height: 180px;
max-height: 180px;
}
Try this code
.panel-block {
float: left;
width: 100%;
}
.panel-img {
float: left;
width: calc(100%/3 - 20px);
height: 141px;
overflow: hidden;
margin: 10px;
display: flex;
align-items: center;
background-color: #c5c5c5;
}
.panel-img img {
width: 100%;
}
<div class="panel-block">
<div class="panel-img">
<img src="https://dummyimage.com/1200x1800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x1800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x1800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x800/ddd/fff"/>
</div>
</div>
I think that the best way to solve this is to generate the square thumbnails for the images.
You don't need weird JS/CSS, everything is simpler and you avoid to load the full size images directly in the gallery (so everyone with a data plan would be happy and the page will load a lot faster)
I'm using the cool Felxslider to display a slideshow on a sharepoint installation.
it works quite well, but i still have two questions :
1- How to display the caption (you know, the little transparent background with title/description of the picture) not on the bottom of the image, but on the right side?
And not hover the picture, if possible.
2- I have N images to whos, but the slider always shows N+N images, the first extra ones are clones of the images, but the last is always just blank.
For example, i have 3 pictures to show, but the slider generates 6 slides : Number 4 and number 5 are clones of number 1 and number2, and number 6 is totally blank.
It displays such extra pictures no matter how many pictures I have (if i have 2 pictures to display, it will display 4).
Do you have any idea on how to get rid off all these clones?
Thanks a lot to answer, and have a nice day!
in order to have the caption appear on the right side I added some css rules and a specific HTML caption format.
Here's a jfiddle of the right caption display: http://jsfiddle.net/tyuth1sr/23/
Use the following css on your website's custom stylesheet, then use the HTML format for the captions:
CSS
/*
* flexslider slide styling
*/
.slides {
overflow: hidden !important;
}
.slides div .flex-caption {
overflow: scroll !important;
}
/*
* flexslider caption styling
*/
.flex-caption {
position: absolute;
text-align: left;
font-size: 11px;
background:rgba(255, 255, 255, 0.7);
z-index: 100;
padding: 20px 10px 35px 30px;
width: 287px;
padding-top: 100%;
bottom: 0px;
color: #000;
}
.right {
right: 0;
margin-bottom: 0px;
}
.show-caption {
position: absolute;
top: 48%;
right: 240px;
z-index: 99;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
pointer-events: none;
}
And format your flexslider captions like so:
HTML
<ul class="slides" id="slideshow" ondragstart="return false;">
<li>
<img src="https://iluvmafuckinglife.files.wordpress.com/2012/04/256989-a-sphere-sculpture-made-from-easter-eggs-is-on-display-on-the-day-of-i.jpg" />
<div class="flex-caption right">
<div class="caption-content">
<p><span class="hcaption">Caption 1</span></p>
<br /><br />
<p class="hcap">Caption 1 text goes here.</p>
</div>
</div>
</li>
<li>
<img src="http://s3-ec.buzzfed.com/static/enhanced/web05/2012/2/8/11/enhanced-buzz-wide-29760-1328717305-32.jpg" />
<div class="flex-caption right">
<div class="caption-content">
<p><span class="hcaption">Caption 2</span></p>
<br /><br />
<p class="hcap">Caption 2 text goes here.</p>
</div>
</div>
</li>
Please note that you can make the caption appear on over any side of the flexslider slide by removing the .right css position specification of "right: 0px" and adding "left: 0px", "top: 0px;" or "bottom: 0px;" depending on where you want it to appear. You would also have to tweak the text formatting/background padding CSS to make it appear properly in one of those other positions.
I have image field, and im trying to get watermark on it, while hovering this image. I tried simple img:hover, but the hover image still under my main img. Any ideas how can i make my hover image to be higher then my main img.
Try this - http://jsfiddle.net/2UQ6N/
<div>
<img src="http://lorempixel.com/300/200" />
<img src="http://cdn-img.easyicon.cn/png/270/27093.png" class="watermark" />
</div>
div {
position: relative;
display: inline-block;
}
div:hover img.watermark {
display: block;
}
img.watermark {
position: absolute;
bottom: 0;
right: 0;
opacity: .6;
display: none;
}
You need to put the hover image later in the document flow or increase the z-index to be higher than the image it is covering.
As people will no doubt mention, this will not stop people from getting hold of your image if they want to.
You have to set a position: relative to put an image on top.
<img src="images/image1" width="225" height="219" border="0">
<img src="images/image2" width="250" height="372" border="0" style="position: relative;>
So on your :hover you add the position: relative to your top image.