My image gallery works fine when rolling over, although in the section where the images enlarge to, i'd like the first image in the gallery to automatically appear in there, at the moment it just displays a blank box until you hover over the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
</head>
<div id="wrapper">
<body>
<div id="header">
<div id ="logo">
<embed src="Media/Images/logo.svg" type="image/svg+xml" />
</div>
<div id="icons">
<img src="Media/Images/EnvelopeIcon.png" alt="Envelope Icon" height="25" width="30">
<p>M015734a#student.staffs.ac.uk</p>
<div class="clear">
</div>
<img src="Media/Images/PhoneIcon.png" alt="Envelope Icon" height="25" width="30" />
<p> 07904921417</p>
<div class="clear">
</div>
<img src="Media/Images/HouseIcon.png" alt="Envelope Icon" height="25" width="30">
<p>Stafford, UK</p>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
<nav>
<div id ="NavBar">
<div id="Nav1">
<div id="Triangle1"></div>
<h2>About Me</h2>
</div>
<div id="Nav2">
<div id="Triangle2"></div>
<h2>Education</h2>
</div>
<div id="Nav3">
<div id="Triangle3"></div>
<h2>Portfolio</h2>
</div>
<div id="Nav4">
<div id="Triangle4"></div>
<h2>Interests</h2>
</div>
<div id="Nav5">
<div id="Triangle5"></div>
<h2>Contact Me</h2>
</div>
</div>
</nav>
<article>
<section id = "content">
<h1>Portfolio Work</h1>
<div class="gallerycontainer">
<a class="thumbnail"><img src="Media/Images/Tardis.bmp" width="225px" height="125px" border="0" /><span><img src="Media/Images/Tardis.bmp" width="750px" height="450px"/><br />3DS Tardis Model.</span></a>
<br />
<a class="thumbnail"><img src="Media/Images/Main Station.png" width="225px" height="125px" border="0" /><span><img src="Media/Images/Main Station.png" width="750px" height="450px" /><br /></span></a>
<br />
<a class="thumbnail"><img src="Media/Images/Claymation1.JPG" width="225px" height="125px" border="0" /><span><img src="Media/Images/Claymation1.JPG" width="750px" height="450px"/><br />Sushi for dinner anyone?</span></a>
<br/>
<a class="thumbnail"><img src="Media/Images/DSC_0245.jpg" width="175px" height="125px" border="0" /><span><img src="Media/Images/DSC_0245.jpg" width="500px" height="450px"/><br />Run wild with horses.</span></a>
<br />
<a class="thumbnail"><img src="Media/Images/DSC_0043 (3).JPG" width="225px" text-align="center" height="125px" border="0" /><span><img src="Media/Images/DSC_0043 (3).JPG" width="750px" height="450px"/><br />Run wild with horses.</span></a>
</div>
</section>
</section>
</article>
</div>
<footer>
</footer>
</body>
</html>
.gallerycontainer{
position: relative;
height: 250px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
background-color: #333;
visibility: visible;
top: 0;
left: 250px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
I would not hide the first image but give it a low z-index so the other images float over it. This will only work though if the images are the same dimensions.
HTML
<div class="gallerycontainer">
<a class="thumbnail"><img src="Media/Images/Tardis.bmp" width="225px" height="125px" border="0" /><span class="first"><img src="Media/Images/Tardis.bmp" width="750px" height="450px"/><br />3DS Tardis Model.</span></a>
<br />
<a class="thumbnail"><img src="Media/Images/Main Station.png" width="225px" height="125px" border="0" /><span><img src="Media/Images/Main Station.png" width="750px" height="450px" /><br /></span></a>
<br />
CSS
.thumbnail:hover span, .thumbnail span.first{ /*CSS for enlarged image*/
background-color: #FFF;
visibility: visible;
top: 0;
left: 250px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
.thumbnail span.first
{
z-index: 10 !important; /*Lower z-index for first one so others appear above it */
}
UPDATE
From the code in your fiddle you've missed 2 important things in the implementing this:
Note the two selectors here (first line of my CSS code snippet): .thumbnail:hover span, .thumbnail span.first. You only have your original selector. -- this applies the same style to the "first" span as the "hovered" span
The leading "." is missing in your code for .thumbnail span.first -- this adjusts the z-index for the "first" span so the others will appear above it.
Update 2
The span needs a background colour to mask the text of the first image. Also if the image has transparency, without the background color the first image will show though. The update fiddle shows this.
Example Fiddle
Related
following various online tutorials, I'm trying to make an image gallery which just simply displays square cropped images. It appears to work on the second and third row, but for what ever reason not on the first row? Does anyone know what I might be doing wrong?
.article {
border: 1px solid red;
max-width: 1000px;
}
.gallery {
border: 1px solid blue;
display: flex;
flex-wrap: wrap;
}
.gallery-item {
border: 1px solid red;
flex-basis: 49%;
}
.gallery-item:before {
content: "";
float: left;
padding-top: 100%;
}
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class='article'>
<h1>
title titile title
</h1>
<div class='gallery'>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/500' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/500x750' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x500' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x500' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/300x300' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x750' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x750' />
</div>
</div>
</div>
Codepen:
https://codepen.io/pandalism/pen/XWdyJbz
Any direction at all would be great thanks!
The problem is with the 500x750 image. According to the cover documentation:
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
You've basically enforced a minimum height using gallery-item:before, but the only dimension that's actually determined is width; if the item has height>width, it will cause the gallery-item to expand. When you put the 500x750 image in any row, you'll see that it expands vertically.
I'd recommend styling the gallery-item to be a square per this answer. Once you have a maximum height enforced, contain should work like you want it to.
YOU CAN USE THIS CODE OF HTML IF YOU ONLY WANT TO DISPLAY SQUARE SIZE IMAGES
<html>
<head>
</head>
<div class='article'>
<h1>
title titile title
</h1>
<div class='gallery'>
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/500' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/500x750' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x500' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x500' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/300x300' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x750' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x750' />
</div>
</html>
Having an issue where i have two columns a left and right that will not go the 100% to the bottom where it should meet with the about dealer section. I have a left column and a center column and a right column. The center is the one that is filled with content and the right and left column should flow along with it without any content in it.
I have researched this for the last two day and have tried a ton of different things found on stack overflow and other sites, the big difference was setting the html, body{ height: 100%} to 100% along with using the vh on the columns. this works somewhat and am looking for a little help on what I'm doing wrong
I can't figure out why it only goes down 740px and stops.
I can post all the code but there is a lot of it so for now ill just give the parts I'm talking about.
If there is more information/code needed please let me know so i can present it.
Here is the site hosted for viewing Site Here
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="frontDoor.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="leftColumn"></div>
<div class="centerBox">
<div class="slideShow">
Slide Show
</div>
<div class="autoSearch">
auto Search
</div>
<div class="recList">
<span><b>Recent</b></span>Listings
</div>
<div class="recImg">
<img src="images/honda.png" alt="car" width="200" />
<img src="images/honda.png" alt="car" width="200"/>
<img src="images/honda.png" alt="car" width="200"/>
<img src="images/honda.png" alt="car" width="200"/>
</div>
<div class="srchSell">
<div class="srchBut">
<button class="button but1">SEARCH</button>
</div>
<div class="sellBut">
<button class="button but2">SELL</button>
</div>
</div>
<div class="recBlog">
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200"/>
</div>
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200"/>
</div>
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200"/>
</div>
</div>
<div class="autoNews">
Auto news
<hr class="style-six">
<div class="news">
<img src="images/honda.png" alt="car" width="150" />
</div>
<div class="news">
<img src="images/honda.png" alt="car" width="150" />
</div>
</div>
</div>
<div class="rightColumn"></div>
</div>
</body>
</html>
Here is the CSS
html {height: 100%;}
body{
background-color: #222222;
font-family: 'PT Sans Narrow', sans-serif;
}
.wrapper {
margin: 0 auto;
width: 960px;/*1688px*/
height: 100%;
background-color:#b3ffb3;
}
.rightColumn{
float: left;
width: 70px;
height: 100%;
border: 1px sold gray;
background-color:#fff;
}
/* This is the center column */
.centerBox{
float:left;
width: 820px;
height: 100%;
border: 1px sold gray;
background-color:#fff;
overflow: hidden;
}
The simplest way is to wrap the three columns in a container DIV (.wrap_3 in my snippet below) and apply display: flex and height: 100% to that container. Also html and body need height: 100% for that height setting to work.
html,
body {
height: 100%;
margin: 0;
}
html {
height: 100%;
}
body {
background-color: #222222;
font-family: 'PT Sans Narrow', sans-serif;
}
.wrapper {
margin: 0 auto;
width: 960px;
/*1688px*/
height: 100%;
background-color: #b3ffb3;
}
.wrap_3 {
display: flex;
height: 100%;
}
.leftColumn {
width: 70px;
border: 1px sold gray;
background-color: #fb7;
}
.rightColumn {
width: 70px;
border: 1px sold gray;
background-color: #b8f;
}
.centerBox {
width: 820px;
border: 1px sold gray;
background-color: #fff;
overflow: hidden;
}
<div class="wrap_3">
<div class="leftColumn"></div>
<div class="centerBox">
<div class="slideShow">
Slide Show
</div>
<div class="autoSearch">
auto Search
</div>
<div class="recList">
<span><b>Recent</b></span>Listings
</div>
<div class="recImg">
<img src="images/honda.png" alt="car" width="200" />
<img src="images/honda.png" alt="car" width="200" />
<img src="images/honda.png" alt="car" width="200" />
<img src="images/honda.png" alt="car" width="200" />
</div>
<div class="srchSell">
<div class="srchBut">
<button class="button but1">SEARCH</button>
</div>
<div class="sellBut">
<button class="button but2">SELL</button>
</div>
</div>
<div class="recBlog">
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200" />
</div>
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200" />
</div>
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200" />
</div>
</div>
<div class="autoNews">
Auto news
<hr class="style-six">
<div class="news">
<img src="images/honda.png" alt="car" width="150" />
</div>
<div class="news">
<img src="images/honda.png" alt="car" width="150" />
</div>
</div>
</div>
<div class="rightColumn"></div>
</div>
I'm trying to make a simple homepage with clickable images as buttons, no problem, I can do that.
But I'm stuck at this part:
I have these 4 images in dividers with on hover shadow.
Now these images are vertical under each other.
I want them horizontal next to each other.
EDIT: Got it, now I need it to center it horizontal and vertical.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgBox
{
width: 300px;
height: 600px;
display: inline-block
}
.imgBox:hover
{
display: inline-block
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
</style>
</head>
<body background="back.jpg">
<center>
<div align="left">
<div class="imgBox">
<a target="_blank" href="IntensityBanner.png">
<img src="IntensityBanner.png" alt="Trolltunga Norway" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="EarningsBanner.png">
<img src="EarningsBanner.png" alt="Forest" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="img_lights.jpg">
<img src="DesignBanner.png" alt="Northern Lights" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="img_mountains.jpg">
<img src="SpaarGamesBanner.png" alt="Mountains" width="300" height="600">
</a>
</div>
</center>
</div>
</body>
</html>
Live demo: http://twanofzo.nl/test/
First, make sure you close that first imgBox div (line 12) or it'll give you trouble.
Next, to make them display horizontally, you should just be able to either add display: inline-block or float: left to your css for .imgBox
i want programming slideshow by CSS3
this my code HTML
<div id="slideshow">
<img src="img/s1.jpg" alt="s1" />
<img src="img/s2.jpg" alt="s1" />
<img src="img/s3.jpg" alt="s1" />
</div>
<div class="next">
<img src="img/next.png" />
</div>
<div class="prev">
<img src="img/prev.png" />
</div>
and this code CSS3
.slideshow{
width: 1020px;
height: 500px;
border-bottom: 3px solid #f04831;
border-top: 3px solid #f04831;
overflow: hidden;
}
i want change place the icon "next" and "preview" to like control slideshow
You can do it with a increment counter and a simple getDocumentById. And if you want your images not to show you can comment or uncoment display: none; on CSS, however you like. Here is the fiddle:
document.getElementById('btnnext').onclick = myFunction;
// If the user clicks in the window, set the background color of <body> to yellow
var counter = 0;
function myFunction() {
var div = document.getElementById('slideshow');
var img = div.getElementsByTagName('img')[counter].src;//.childNodes[2];
document.getElementById("imgprev").src=img;//document.getElementById("imgprev").src;
counter++;
if (counter==3) counter = 0;
}
#slideshow{
/*width: 1020px;
height: 500px;
border-bottom: 3px solid #f04831;
border-top: 3px solid #f04831;
overflow: hidden;
visibility:hidden;*/
display: none;
}
<div id="slideshow">
<img src="https://medium.com/img/email/fb_logo.png" alt="s1" />
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_64.png" alt="s1" />
<img src="http://welcome.hp-ww.com/country/us/en/cs/images/i/header-footer/caas-hf-v3/hp-logo.gif" alt="s1" />
</div>
<div id="btnnext" class="next">
<img src="http://www.drollify.com/wp-content/uploads/2015/03/button-play.png" />
</div>
<div class="prev">
<img id="imgprev" src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Img_blank.png" />
</div>
I have a site with a portfolio image, when the image is hovered on, an overlay appears.
I have implemented this in such a way that it means when the code is multiplied (for 3 different portfolio items) the overlay is always only over the first image, rather than on each different image being rolled-over.
Can anyone help?
Live link is here
The code used to make the image overlay:
CSS:
.image {
position: relative;
height: 240px;
}
.hoverimage {
position: absolute;
top: 5px;
left: 25px;
display: none;
}
.image:hover .hoverimage {
display: block;
}
HTML:
<img src="images/portfolio_image_1.png" class="captionme"
title="I am the only son" alt="Porfolio detail" />
<img src="images/portfolio_image_1.png" class="captionme"
title="I am the only son" alt="Porfolio detail" />
<img src="images/portfolio_image_1.png" class="captionme"
title="I am the only son" alt="Porfolio detail" />
To overlay on each different image being rolled-over, you'll have to make some changes in your HTML and CSS files. In your HTML file search for <div class="image"> and put each <img class="hoverimage"> element inside <div class=""imgpost">:
<div class="image">
<div class="imgpost">
<img src="images/portfolio_image_1.png" class="captionme" title="I am the only son" alt="Porfolio detail">
<div class="thecaption">I am the only son</div>
<img class="hoverimage" src="images/portfolio_overlay.png" alt="">
</div>
<div class="imgpost">
<img src="images/portfolio_image_1.png" class="captionme" title="I am the only son" alt="Porfolio detail">
<div class="thecaption">I am the only son</div>
<img class="hoverimage" src="images/portfolio_overlay.png" alt="">
</div>
<div class="imgpost">
<img src="images/portfolio_image_1.png" class="captionme" title="I am the only son" alt="Porfolio detail">
<div class="thecaption">I am the only son</div>
<img class="hoverimage" src="images/portfolio_overlay.png" alt="">
</div>
</div>
Then in your CSS add/modify the folowing styles:
.hoverimage { position: absolute; top: 1px; left: 1px; display: none;}
.imgpost .hoverimage {
border: none;
background: none;
}
.imgpost:hover .hoverimage {
display: block;
}
Then delete this style:
.image:hover .hoverimage { display: block; }