This question already has answers here:
How to show text on image when hovering?
(10 answers)
Closed 3 months ago.
https://practice-project-html-css.vercel.app/#project
I'm talking about "PROJECTS".
When you hover there, it shows some text. How do I make it?
Like this: https://imgur.com/a/N86uRpP
HTML:
<div class="grid-container">
<div class="one"><img src="project1.png" alt="" /></div>
<div class="two"><img src="Project2.png" alt="" /></div>
<div class="three"><img src="project3.png" alt="" /></div>
<div class="four"><img src="project4.png" alt="" /></div>
<div class="five"><img src="project5.png" alt="" /></div>
<div class="six"><img src="project6.png" alt="" /></div>
<div class="seven"><img src="project7.png" alt="" /></div>
<div class="eight"><img src="project8.png" alt="" /></div>
<div class="nine"><img src="project9.png" alt="" /></div>
</div>
CSS:
.grid-container{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:40px;
}
To achieve this effect, you can use a combination of the overflow and position properties. The idea is to set overflow-y: hidden; and give it a set height. Then, position the child container so that it falls outside of the parent container. When the parent container is hovered, the bottom property along with position: absolute; can be used to transition it into view.
.image-container {
position: relative;
color: white;
background-color: #888;
height: 100px;
padding: 10px;
overflow-y: hidden;
}
.image-container:hover .container-text {
bottom: 0px;
}
.container-text {
position: absolute;
bottom: -60px;
left: 0;
transition: bottom 200ms;
text-align: center;
padding: 10px;
background-color: #444;
width: 100%;
box-sizing: border-box;
}
<div class="image-container">
Hover me
<div class="container-text">Message</div>
</div>
You can check this example.
https://codepen.io/francisco-kataldo/pen/LBBryV
If you want more you can check this page.
https://ordinarycoders.com/blog/article/codepen-bootstrap-card-hovers
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Keep the middle item centered when side items have different widths
(12 answers)
Closed 1 year ago.
I would like to have 3 buttons in the middle and a slider on the right side, these on the same line. The problem is that when I center the buttons and float the slider to the right, the buttons are not in the middle anymore. So it looks like this (ignore the top slider):
.container {
text-align: center;
}
.music-buttons {
width: 50px;
height: 50px;
}
.volume-control {
margin-right: 10px;
float: right;
}
<div>
<input type="range" class="volume-control">
</div>
<div class="container">
<img class="music-buttons" src="https://via.placeholder.com/50">
<img class="music-buttons" src="https://via.placeholder.com/50">
<img class="music-buttons" src="https://via.placeholder.com/50">
</div>
It might be a mess, but I was just trying out stuff.
Try using this CSS code :
.container{
text-align: center;
}
.music-buttons{
width: 50px;
height: 50px;
}
.volume-control{
margin-right: 10px;
position: absolute;
right: 10px;
top: 22px;
}
<div class="div-range">
<input type="range" class="volume-control">
</div>
<div class="container">
<img class="music-buttons" src="../icons/skip-start-circle.svg">
<img class="music-buttons" src="../icons/play-circle.svg">
<img class="music-buttons" src="../icons/skip-end-circle.svg">
</div>
I hope this will help.
.container{
text-align: center;
}
.music-buttons{
width: 50px;
height: 50px;
}
.volume-control{
text-align: center;
height: 50px;
}
<div class="container">
<div class="row">
<div class="col">
<img class="music-buttons" src="https://img.icons8.com/ios/50/000000/skip-to-start--v1.png">
<img class="music-buttons" src="https://img.icons8.com/ios/50/000000/pause--v1.png">
<img class="music-buttons" src="https://img.icons8.com/external-kiranshastry-lineal-kiranshastry/64/000000/external-skip-multimedia-kiranshastry-lineal-kiranshastry.png">
<input type="range" class="volume-control">
</div>
</div>
</div>
This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I want to apply text over image on hover to every picture without it messing up elements container.
I've tried THIS and solutions similar, but It doesn't work for me.
This is what I have.
/*CSS*/
.item {
display: inline-block;
}
img {
padding-right: 10px;
}
.kulso {
text-align: center;
padding-top: 20px;
}
.kulso2 {
text-align: center;
}
<!--HTML-->
<div class="kulso">
<div class="item">
<img src="./img/long_macchiato.jpg" width="300px" height="200px" />
<p>Long Macchiato</p>
</div>
<div class="item">
<img src="./img/longblack.jpg" width="300px" height="200px" />
<p>Long Black</p>
</div>
<div class="item">
<img src="./img/café latte.jpg" width="300px" height="200px" />
<p>Café Latte</p>
</div>
<div class="item">
<img src="./img/ristretto.jpg" width="300px" height="200px" />
<p>Ristretto</p>
</div>
</div>
<div class="kulso2">
<div class="item">
<img src="./img/Cappuccino.jpg" width="300px" height="200px" />
<p>Capuccino</p>
</div>
<div class="item">
<img src="./img/flat-white.jpg" width="300px" height="200px" />
<p>Flat White</p>
</div>
<div class="item">
<img src="./img/mocha-coffee.jpg" width="300px" height="200px" />
<p>Mocha Coffee</p>
</div>
<div class="item">
<img src="./img/affogato.jpg" width="300px" height="200px" />
<p>Affogato</p>
</div>
</div>
Demo site:
https://peaceful-carson-9d2ad7.netlify.com/products.html/
I understad I have to have a wrapper around each image and caption. My problem is, no matter what properties I'm modifying or adding while trying to apply the text over image on hover using THIS, either...
"inline-block" is off, the pictures won't stay next to each other
opacity, transition affects padding between pictures
the text is in the center of the page, not the picture
the size of the pictures change
I noticed that adding
<div class="text">This is the text that appears on hover in the center of the image</div>
instantly messes up everything.
Please give me tips or solutions using my code I shared above!
You have to have a wrapper around each image and caption, much like the examples you link to. You can modify this a bit as the css could be a bit cleaner but this is the basic thing you can do.
.container {
padding-bottom: 20px;
}
.container__row {
display: flex;
}
img {
max-width: 100%;
display: inline-block;
padding-bottom: 10px;
}
/* For medium devices (e.g. tablets) */
#media (min-width: 420px) {
.image-container {
max-width: 48%;
}
}
/* For large devices (e.g. desktops) */
#media (min-width: 760px) {
.image-container {
max-width: 24%;
}
}
.egykispadding {
padding-top: 20px;
}
.image-container {
position: relative;
max-width: 400px;
}
.image-container__caption {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: deepskyblue;
color: white;
font-size: 2rem;
opacity: 0;
visibility: hidden;
transition: opacity 140ms;
}
.image-container:hover .image-container__caption {
opacity: 1;
visibility: visible;
}
<div class="container">
<div class="container__row egykispadding">
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
</div>
<div class="container__row">
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
</div>
You can try this:
<div id='hover2change' style="background-image:url('a.png');width:50px;height:50px;">
<img src="b.png" style="position:absolute;top:0px;left:0px;width:50px;">
</div>
<style>
#hover2change:hover img {left:-100%;}
</style>
I'm new to HTML and CSS. For one of my projects, I need to put 16 images into a 4x4 grid of tiles on a webpage. These tiles cannot have gaps between them, and they need to stretch to fill the browser from side to side. They also should only scroll vertically. We are only allowed to use JavaScript or JQuery so I can only use HTML and CSS.
I wrote 4 div elements, each represents a row; inside each div, a span element holds 4 images - that's how I made the 4x4 grid. A code snippet looks like this:
/* One row in a div*/
<div class="map">
<span>
<img src="map_images/1.png">
<img src="map_images/2.png">
<img src="map_images/3.png">
<img src="map_images/4.png">
</span>
</div>
I also wrote a navigation bar that should float above the background images in the upper right corner:
/* 4 div elements of 4 rows before this code*/
<div id="nav">
<div>Foo</div>
<div>Boo</div>
</div>
For the above code, my stylesheet looks like this:
.map{
margin:0;
padding:0;
}
#nav {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
However, I've encountered several problems at this point.
First, I still have column gaps and row gaps between all 16 images. No matter what values I set map margin and padding to, nothing changes. I even tried negative values, still nothing changed. Can someone tell me how to go about this problem, eliminating all gaps?
Secondly, I googled and learned that z-index can be used to make div float above background; however, this is no working here and it seems that div #nav stays in the upper right corner as a separate div that does take up space, instead of floating above. Any suggestions on this?
Float left and set the width to 25%. Also I show below how to create a floating menu using the :hover pseudo-class.
.map div img {
width: 25%;
float:left;
display: inline-block;
}
#nav {
width: 50px;
background-color: grey;
}
#nav ul {
margin: 0;
padding: 0;
width: 50px;
background-color: grey;
position: absolute;
display:none;
}
#nav:hover ul, #nav ul:hover {
display:block;
}
<div id="nav">
Menu
<ul>
<li>Foo</li>
<li>Boo</li>
</ul>
</div>
<div class="map">
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
</div>
I think you are looking for something like this? See fiddle http://jsfiddle.net/DIRTY_SMITH/q12bh4se/4/
Snippet :
body {
margin: 0px;
}
div {
width: 50%;
float: left;
}
img {
width: 50%;
float: left;
}
.top-left {
z-index: 9999;
position: absolute;
top: 0;
left: 0;
color: white;
}
.top-right {
z-index: 9999;
position: absolute;
top: 0;
right: 0;
color: white;
}
<h1 class="top-left">Top Left</h1>
<h1 class="top-right">Top Right</h1>
<div class="row-1-col-1">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-1-col-2">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-2-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-3-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
All I had to do was set float: left and width: 25% on the images in CSS
.map img{
float: left;
width: 25%;
}
DEMO
I would like to put one image above another, but all answers I find are using position absolute with specific pixels. I want to achieve it in a responsiveness way, so I would like to avoid strict composition.
Now my code looks like:
<style>
.header{
margin:20px;
text-align:center;
}
.data{
text-align:center;
}
</style>
<body>
<h1>Hello Stack Overflow!</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
I would like to move the .logo img above the background img and, have different classes to move it:
Center center;
Center right;
Center left;
So, my goal is having the possibility to accomplish the following image with a class that can "move" my logo, but always maintaining it above the background image. Note that the background image could have not always the same size.
I did a plunkr to test with where you can reproduce it.
Although this answer uses absolute positioning it is responsive and should work they way you want. This answer also assumes that you have high quality background images that will not lose quality when scaled to a large size.
The logo is centered by default. There is a .logo-right and .logo-left class for side positioning.
There is a small edge case that the logo breaks out a little at small screens when the height of the background image is less than the logo. To account for this you can set the logo width to a percentage and also give it a max-width so that it doesn't enlarge too far if you are using a rasterized (non-svg) logo (see Snippet) .
.header {
margin:20px;
text-align:center;
position: relative;
}
.data{
text-align:center;
}
.background {
height: auto;
width: 100%;
}
.logo {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
max-height: 100px;
position: absolute;
right: 0;
top: 0;
width: auto;
}
.logo-right {
margin-right: 5%;
}
.logo-left {
margin-left: 5%;
}
<h1>Centered</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Right</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-right">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Left</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-left">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
Maybe something like this?
http://plnkr.co/edit/wd6wui?p=preview
<style>
.header {
margin: 20px;
text-align: center;
position: relative;
}
.img-container {
position: absolute;
top: 0;
width: 100%;
}
.data {
text-align: center;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
<div class="header">
<div class="img-container">
<img src="http://lorempixel.com/g/800/200/" class="background">
</div>
<div class="img-container">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
</div>
Not sure I understood your question ;)
wrapping the images in div will do the work
<div><img src="http://lorempixel.com/100/100/" class="logo"></div>
I'm trying to format an image so it aligns to the bottom of a div. I put what I think is the relevant code in a fiddle: http://jsfiddle.net/5KEyD/
<div id="main">
<div style="display: inline-block; margin-left: 15px">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="Bottom-Text.png" alt="Some Image" width="800" height="152" /></div> </div></div>
#main{width:800px; height: 200px; padding-right:40px; overflow:hidden; background- color: #c0c0c0;}
#imageWrapper { position: relative; height: 152px; } /* height is for display purposes only */
#bottomImage { position: absolute; bottom: 0px; }
What I need is for the image to align (centered) all the way at the bottom, with no extra grey space under it.
Thanks for any help!
<div style="width: 800px; margin: 0 auto;">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="/wp-content/uploads/2014/05/Bottom-Text.png" alt="Some Image" width="800" height="152">
</div>
</div>
I think that happens because of using display: inline-block for div element. Inline-block rule always adds 5px margins to element. So if you remove it the issue will be fixed. If you need that rule you can add -5px bottom margin.