this is my first question soo... i have to do someting like this:
but i search a lot and nothing work for me, i had something like this in my html and css
.thumbnail {
position: relative;
margin-bottom: 0;
border: 0;
border-color: transparent;
}
.caption {
position: absolute;
top: 40%;
left: 0;
width: 100%;
}
<div id="box-search">
<div class="thumbnail text-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
<div class="caption">
<p>contacto#windberg.cl</p>
<p>+56983874071 | +56228231294</p>
<p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
</div>
</div>
</div>
that work, but when i use the responsive mode from chrome, the text leave the image
(sorry for my english, i speak spanish)
img {
display: block;
}
.thumbnail {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
text-align: center;
color: white;
font-weight: bold;
}
<div id="box-search">
<div class="thumbnail">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
<div class="caption">
<p>contacto#windberg.cl</p>
<p>+56983874071 | +56228231294</p>
<p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
</div>
</div>
</div>
Related
I have an image with some overlay text. Whenever I hover my mouse over my image, the content displayed once hovered is moved to the left of the original image. The hovered content is shifted 69 pixels to the left. I want the hovered content to be directly hovered over the image. How can I fix this?
HTML
<div class="row">
<div class="container col-lg-3">
<img src="Images/Coding.jpg" alt="" class="image">
<div class="description">
<h6 class="titles">
Coding
</h6>
<br>
<i class="far fa-keyboard fa-2x"></i>
<br>
<br>
<p>
Projects | Learning | Design
</p>
</div>
<div class="overlay">
<div class="text">
<h5>
Take a peak at my offers, current projects, and qualifications
</h5>
<br>
<a class="btn btn-outline-light btn-sm" href="coder.html" role="button">
Explore more
</a>
</div>
</div>
</div>
</div>
CSS
.container {
position: relative;
width: 250px;
height: 250px;
}
.container:hover .overlay {
opacity: 1;
}
.image {
display: inline-block;
width: 250px;
height: 250px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 250px;
width: 250px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
Because container class tacking a padding so please add padding:0px;
.container {
position: relative;
width: 250px;
height: 250px;
padding:0px;
}
I'm working on my portfolio site now. My projects are listed as clickable images, arranged into two columns. I want it that when a user hovers over an image, a solid block of color covers it with the project title in the center. Basically like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade.
I had it working perfectly when I used row/column css classes, but since I've found that to not be very responsive (on mobile, the first column gets stacked on top of the other, which makes sense but that's not the order I want), I aligned the images with float and padding instead. Now, the hover effect/link stretches across the entire page, instead of being contained in the image area.
Here's my code for reference:
CSS
.container {
position: relative;
}
.image {
display: block;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 30px;
font-family: "Lato-Bold";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
#media screen and (min-width: 1025px) {
.image {
float: left;
width: 45%;
padding-left: 40px;
padding-right: 15px;
padding-bottom: 30px;
}
}
HTML
<div class = "container">
<img src="image name" class = "image">
<div class="overlay" style = "background-color: #color;">
<div class="text">project title</div>
</div>
</div>
How can I fix this? I've tried adding display: block to the .overlay class. I've tried making the .overlay class the same size as the image. I've also tried wrapping the link around the container class instead of the other way around like it is now. Nothing happens at all. I've also tried adjusting the container size, but that shrunk the images and stacked them into 1 column :(
Read about Responsive Images and Flexbox
Try the following code.
Note: I changed the HTML structure slightly.
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.thumb {
position: relative;
width: 50%;
}
.thumb img {
width: 100%;
}
.thumb:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
color: #000;
background: #fff;
}
.overlay .text {
position: absolute;
top: 50%;
transform: translate(-50%);
left: 50%;
text-align: center;
}
<div class="container">
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
</div>
I need to display a before and after images on mouse hover.I did edit the code from w3schools image effects.and come up with the CSS.With one Object Containing the before and after image. it works But when there two objects the 2nd Object "after" image displays .in the 1st Object "after" image place.since there can only be one class (Overlay) been used twice(because of the loop) .only the first class(overlay) place.will be used for all further "After" images.How do I get the after image to display with in its own place? thanks for
any information or advice
<style>
.containerImage {
position: relative;
width: 50%;
}
.image {
display: block;
width: 150px;
height: 150px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 150px;
width: 150px;
opacity: 0;
transition: .5s ease;
}
.containerImage:hover .overlay {
opacity: 1;
}
.text {
display: block;
width: 150px;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="containerImage">
#foreach (var item in Model.Take(2))
{
<img src="~/Img/#item.BeforePic" alt="Avatar" class="image">
<div class="overlay">
<img src="~/Img/#item.AfterPic" alt="Avatar" class="text">
</div>
<br/>
}
</div>
<style>
.containerImage {
position: relative;
width: 50%;
}
.image {
display: block;
width: 150px;
height: 150px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 150px;
width: 150px;
opacity: 0;
transition: .5s ease;
}
.containerImage:hover .overlay {
opacity: 1;
}
.text {
display: block;
width: 150px;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="containerImage">
<img src="https://images.pexels.com/photos/52533/orange-fruit-vitamins-healthy-eating-52533.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="image">
<div class="overlay">
<img src="https://images.pexels.com/photos/370014/pexels-photo-370014.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="text">
</div>
<br/>
<img src="https://images.pexels.com/photos/566888/pexels-photo-566888.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="image">
<div class="overlay">
<img src="https://images.pexels.com/photos/46174/strawberries-berries-fruit-freshness-46174.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="text">
</div>
<br/>
</div>
<hr/>
<p>The actual "after image" of the Orange but the Strawberry "after image" is showing</p>
<img src="https://images.pexels.com/photos/370014/pexels-photo-370014.jpeg?h=350&auto=compress&cs=tinysrgb"class="image" alt="Avatar">
This is because you have the containerImage with position relative and it is the only wrapper for all images.
This causes all the absolute elements to start at top:0, left:0, from the very first parent with position relative, in your case containerImage.
You can create multiple containerImage and bring it inside the foreach loop:
#foreach (var item in Model.Take(2)){
<div class="containerImage">
<img src="~/Img/#item.BeforePic" alt="Avatar" class="image">
<div class="overlay">
<img src="~/Img/#item.AfterPic" alt="Avatar" class="text">
</div>
</div>
}
And remove the br, since divs has a default display set to block.
Like this you don't have to change your CSS. Alternatively if you can't bring in the div containerImage. Just create another div (name it something like inner-wrapper and give it position relative).
I've created a working codepen.
Hope this helps you!
I'm trying to remove the automatically generated container margin around this image. Below is the code I used to produce it. You can view the website here. I tried to add a margin and padding item to the body element, but it didn't resolve the issue.
.container {
position: relative;
width: 240px;
height: 240px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 0.85;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="./img/headshots/Exec_DMoon.jpg" width="240" height="240" alt="Photo of David Moon, Assistant Vice President for Financial Affairs" class="image">
<div class="overlay">
<div class="text"><b>David Moon</b> Assistant Vice President for Financial Affairs, <a class="usa-external_link" target="_blank" href="mailto:davidmoon826#gwmail.gwu.edu">Email</a></div>
</div>
</div>
This is the desired output:
What am I doing wrong?
The easiest fix for this, imo: wrap the items you want in a grid in a div and give the div display: flex and flex-wrap: wrap. Good luck!
Well, just add float: left to .container
(to achieve what you show under "this is the desired output")
The answer from Johannes almost worked, but it caused issues where text would reposition itself into the open gaps (see image below), instead of formatting below all the images.
The solution was to use display: inline-block; in .container, as Adrian recommended.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
height: 50%;
display: inline-block;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 0.8;
}
.text {
color: white;
font-size: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
</body>
</html>
I'm trying to create a text block with transparent background which is the same width as the image. However if I just add padding to the header then some may overlap or not be long enough due to the varying length in text.
Currently looks like this: http://puu.sh/sdBCX/994cc31da8.png
Here is the relevant HTML:
<div class="container-fluid">
<div class="row">
<div class="artist-grid">
<div class="col-lg-2"></div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>BASSNECTAR</span></h3>
</div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>DATSIK</span></h3>
</div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>CHAINSMOKERS</span></h3>
</div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>ZEDS DEAD</span></h3>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
And the relevant CSS:
h3 {
position: absolute;
top: 244px;
width: 100%
}
h3 span {
color: white;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.artist-grid {
padding-top: 22px;
}
#artistTile {
position: relative;
max-width: 100%;
}
Cheers!
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}