Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to make a stack of images using HTML and CSS, that if I hover or click on any of them, it will be enlarged in the same page. This is what I've been able to do:
<img src ="mark1.jpg" height="150" width="300" />
<img src ="mark2.jpg" height="150" width="300" />
<img src ="mark3.jpg" height="150" width="300" />
<img src ="mark4.jpg" height="150" width="300" />
<img src ="watson1.jpg" height="150" width="300" />
<img src ="watson2.jpg" height="150" width="300" />
<img src ="watson3.jpg" height="150" width="300" />
<img src ="watson4.jpg" height="150" width="300" />
<img src ="watson5.jpg" height="150" width="300" />
<img src ="morgan1.jpg" height="150" width="300" />
<img src ="nyong1.jpg" height="150" width="300" />
<img src ="lion1.jpg" height="150" width="300" />
One possibililty using hover only is to use transform:scale
JSfiddle Demo
CSS
img {
transition:transform 0.25s ease;
}
img:hover {
-webkit-transform:scale(1.5); /* or some other value */
transform:scale(1.5);
}
Add all the images to a container, for example:
<div class="imageContainer">
<img src ="lion1.jpg" height="150" width="300" />
</div>
Then set some CSS that does something to all <img> tags in that container when hovered:
.imageContainer > img:hover {
width: 500px;
height: 200px;
}
I have not tried this but I think it might get you on the right track to experiment yourself.
Check this fiddle
HTML:
<body>
<div id="rightImage">
<img src="https://www.gravatar.com/avatar/703327d6394d273e741186dbc0109f4f?s=128&d=identicon&r=PG&f=1" alt="image"/>
</div>
</body>
CSS:
#rightImage
{
height:275px;
float:left;
position:relative;
}
#rightImage:hover img
{
height: 300px;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 11 months ago.
Improve this question
I am making a photography website and I wanted to have a gallery of images and a list like
Wildlife
Landscape
Ocean
and when I click on them it opens a gallery of images.
I tried looking some tutorials up on youtube and google but couldn't find anything and since I'm not very experienced in HTML and CSS I don't know where to start
Currently I only have a gallery like this
<h1>### </h1>
<h1>###</h1>
<table align="center">
<tr>
<td>
<img src="Images/plant_with_web.png" height="150" width="200" alt="rocks" />
</td>
<td>
<img src="Images/rock_in_water.png" height="150" width="200" alt="rock_on_log" />
</td>
<td>
<img src="Images/rock_on_log.png" height="150" width="200" alt="sunset" />
</td>
</tr>
<tr>
<td>
<img src="Images/Rocks.png" height="150" width="200" alt="sun_on_beach" />
</td>
<td>
<img src="Images/sunset.png" height="150" width="200" alt="rock_in_water" />
</td>
<td>
<img src="Images/waves_crashing.png" height="150" width="200" alt="bird" />
</td>
</tr>
<tr>
<td>
<img src="Images/bird.png" height="150" width="200" />
</td>
<td>
<img src="Images/birdrock.png" height="150" width="200" />
</td>
<td>
<img src="Images/DSC04758.jpg" height="150" width="200" />
</td>
</tr>
You mean like this??
button {
background-color:white;
border:0px;
}
button:hover {
text-decoration:underline;
}
<button> Button 1 as a text
</button>
<button> Button 2 as a text
</button>
$(document).ready(function() {
$("button#wildlife").click(function() {
$(".wildlife> img").toggle();
$(".landscape> img").hide();
$(".ocean> img").hide();
});
$("button#landscape").click(function() {
$(".landscape> img").toggle();
$(".ocean> img").hide();
$(".wildlife> img").hide();
});
$("button#ocean").click(function() {
$(".ocean> img").toggle();
$(".wildlife> img").hide();
$(".landscape> img").hide();
});
});
button {
background-color: white;
border: 0px;
}
button:hover {
text-decoration: underline;
cursor: pointer;
}
.landscape>img {
display: none;
}
.ocean>img {
display: none;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<button id="wildlife">Wildlife</button><br>
<button id="landscape">Landscape</button><br>
<button id="ocean">Ocean</button>
<div class="wildlife">
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
</div>
<div class="landscape">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
</div>
<div class="ocean">
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
</div>
</body>
</html>
I don't really understand your problem.
However, if you are trying to make a button then use the <input type='text'> button </input> or the button element.
Or if you want an image to be clickable then use <img href="image_URL>"
If galleries are on their separate page: use Wildlife
If galleries will open as a full screen pop-up: use <button id="wildlife">Wildlife</button>
You can also use <details><summary> element to get the same functionality without depending more on JavaScript
EDIT 1:
you can us a js library like PhotoSwipe,
it could fit perfectly in your use case
Use input type="submit" value="add"
Value mean Name
This button name is add
I don't recommend the use of a table for a gallery. You can maybe put each gallery in a different html page and use the tag to access them. like:
Wildelife
But if you want them to appear or slide dynamically on the same page you may need some javascript or jquery.
you should use <img src="" alt="" />
Hey your question is a bit unclear, but if you want a button that you click that opens up a wildlife gallery you can have something like this <button> <a href = www.wildlife-photos.com/gallery></a> Wildlife </button> or just make a page called wildlife.html and make the button direct to it <button> <a href = wildlife.html></a> Wildlife </button>
I hope this helps :D
Sorry if this isn't much of a direction.
I'm trying to implement this code to preload images, but it isn't working.
Add CSS:
div#preload { display: none; }
In the footer within the </body> tag:
<div id="preload">
<img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
<img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>
Obviously I've replaced the HTML and repointed to the images, but it's still not working.
Personally I would use JavaScript in this case. But if you want only CSS you can preload all images in a div tag which is positioned in hidden part of window like follows:
#preload
{
position:absolute;
top:-9999px;
left:-9999px;
}
<div id="preload">
<img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
<img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How to place image like that (html,css):
I try:
<img src="http://dummyimage.com/600x400/666" height="300" width="200"/>
<img src="http://dummyimage.com/600x400/333" height="150" width="100" align="top"/>
<img src="http://dummyimage.com/600x400/f2f" height="150" width="100" align="top"/>
<img src="http://dummyimage.com/600x400/ee3" height="150" width="100"/>
<img src="http://dummyimage.com/600x400/532" height="150" width="100"/>
Thanks!
You can use CSS Flexbox.
CSS
#container-outer {
display: flex;
}
.container-inner {
display: flex;
flex-direction: column;
}
HTML
<div id="container-outer">
<img src="http://dummyimage.com/600x400/666" height="300" width="200">
<div class="container-inner">
<img src="http://dummyimage.com/600x400/333" height="150" width="100">
<img src="http://dummyimage.com/600x400/f2f" height="150" width="100">
</div>
<div class="container-inner">
<img src="http://dummyimage.com/600x400/ee3" height="150" width="100">
<img src="http://dummyimage.com/600x400/532" height="150" width="100">
</div>
</div><!-- end #container-outer -->
DEMO (image dimensions fixed): http://jsfiddle.net/3wbme70k/
DEMO (responsive): http://jsfiddle.net/3wbme70k/1/
You can use float to do this.
As an exception here is the code:
<div style="float:left;background:red;height: 100px;width:50%;">1</div>
<div style="float:left;height: 50px;width:25%;background:blue;">2</div>
<div style="float:left;height: 50px;width:25%;background:green;">3</div>
<div style="float:left;height: 50px;width:25%;background:yellow;">4</div>
<div style="float:left;height: 50px;width:25%;background:grey;">5</div>
https://jsfiddle.net/webbis12/ko5p2gnc/
In the future please follow the guidelines.
Edit: I checked your code. Please use CSS-Styles. Float breaks if there is not enough space.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i have an CSS problem
CSS
img[align="left"] {
display: block;
float: left;
}
HTML
<p>
<img class="alignleft wp-image-48 size-thumbnail" src="http://url.com/en/wp-content/uploads/2013/08/jamones-secando-150x150.jpg" alt="jamones-secando" width="150" height="150">
<img class="alignleft size-thumbnail wp-image-50" src="http://url.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg" alt="queso_curado" width="150" height="120">
<img class="alignleft size-thumbnail wp-image-49" src="http://url.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg" alt="embutidos" width="150" height="150">
please check this url http://goo.gl/R0CgpR
There are 3 images alingned on single line around middle of page.
The parent P tag height remains zero. so the next paragraph is aligning right to the images.
so i have to manually put a dot on next 5 lines to get the next paragraph come right below the image.
is this something i can fix through CSS., rather than using dots ?
You can just add overflow:auto to the <p> that contains the images and remove all the <p>.</p>
<p style="text-align: center; overflow:auto">
<img class="alignleft wp-image-48 size-thumbnail" src="http://poqueira.com/en/wp- content/uploads/2013/08/jamones-secando-150x150.jpg" alt="jamones-secando" width="150" height="150">
<img class="alignleft size-thumbnail wp-image-50" src="http://poqueira.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg" alt="queso_curado" width="150" height="120">
<img class="alignleft size-thumbnail wp-image-49" src="http://poqueira.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg" alt="embutidos" width="150" height="150">
</p>
Try adding overflow: hidden; to your p element style
<p style="text-align: center; overflow:hidden">
<img class="alignleft wp-image-48 size-thumbnail" src="http://poqueira.com/en/wp- content/uploads/2013/08/jamones-secando-150x150.jpg" alt="jamones-secando" width="150" height="150">
<img class="alignleft size-thumbnail wp-image-50" src="http://poqueira.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg" alt="queso_curado" width="150" height="120">
<img class="alignleft size-thumbnail wp-image-49" src="http://poqueira.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg" alt="embutidos" width="150" height="150">
</p>
I am a javascript/PHP programmer brand new to CSS and having some trouble getting images to display in a container with overflow. My understanding is that the below code should display the images in rows of three with 15 pixels of space between them. Instead, it displays one single image in the top left of where the div should be. If I remove the ID for the div the images display down a vertical line, and if I remove the div entirely they flow rightward across the page normally. When I gave the div a background color it appeared to be the proper size and in the proper location.
#items_container {
position:absolute;
overflow:auto;
height:500px;
width:500px;
}
.item_image {
margin: 0 15px 15px 0;
padding: 0 0 0 0;
}
<div id="items_container">
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
</div>
I also tried giving the container div a height/width in the HTML, and the image class a height/width in the CSS. Neither did anything. Thanks for any help, everybody!
Not sure I fully understand the question, but this is how I would layout your structure:
http://jsfiddle.net/mDXL2/
HTML
<div id="items_container">
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
</div>
CSS
#items_container {
overflow:hidden;
height:500px;
width:500px;
}
.item_image {
float:left;
margin: 0 15px 15px 0;
padding: 0 0 0 0;
}
The overflow hidden could be replaced by a clear, but I prefer to go the overflow hidden route.
After that you just need to float all of the .item_image elements.