I have a grid of images that when I hover over them, the image opacity reduces to display a div exactly under the image with a clickable link. I haven't been able to click the link when the image lightens. I'm also not sure how to target the hover on one div and then affect another divs style. I haven't included the img-grid container which houses all the 'press-info' divs. here is a snippet of my code.
press-info {
width: 350px;
height: 460px;
padding: 1.5rem;
/* border: 1px solid blue; */
}
.card {
position: relative;
width: 100%;
height:100%;
/* border: 1px solid green; */
}
/* card front styling */
.face.front{
/* border: 1px solid red; */
position: absolute;
width: 100%;
height: 100%;
transition: opacity 1s;
}
.front img {
width: 100%;
height: 100%;
}
<div class="press-info">
<div class="card">
<div class="back face">
<a href="https://oddamagazine.com/project/fashions-future-designers/" `target="_blank">ODDA MAGAZINE`
: FASHION'S
FUTURE
DESIGNERS<br><span>⬈</span></a>
</div>
<div class="front face">
<img src="press/press-1.png">
</div>
</div>
</div>
Related
How to set background with opacity without affecting border line opacity? Solutions I found does not help.
<div class="selected">
<img
src="../assets/img/image-product-1-thumbnail.jpg"
alt="product-1-thumbnail"
/>
</div>
img {
width: 100%;
max-width: 5rem;
height: auto;
border-radius: 10%;
}
.selected {
background-color: red;
img {
border: 2px solid red;
}
}
let thumbnailImages = document.querySelectorAll('.thumbnail');
thumbnailImages.forEach(image => {
image.addEventListener("mouseover", ()=> {
image.classList.add('blur')
image.parentElement.style.outline = "2px solid hsl(26, 100%, 55%)";
image.parentElement.style.borderRadius = "12px";
})
image.addEventListener("mouseout", ()=> {
image.classList.remove('blur')
image.parentElement.style.outline = "";
})
});
.left-section-bottom{
display: flex;
width: 80%;
margin: 32px auto;
gap: 40px;
}
.left-section-bottom img{
border-radius: 12px;
}
.thumbnail.blur{
opacity: 0.4;
cursor: pointer;
}
.thumbnail-div{
display: flex;
}
<div class="left-section-bottom">
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
</div>
I was looking for an answer to this same question, and finally figured it out. The original question is in regard to this challenge:
https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6
Since there are 4 images you have to loop through them one by one.
You have to use querySelectorAll, not querySelector.
Just loop through your thumbnail images with a forEach().
Wrap your images in a div (as Kingsly mentioned) so you can apply
border style to the div instead of your blurred images.
This code should work if you add your images.
You should put the image in a div container with the size you want. Add the border and border-radius to the div, add opacity to the img element.
IMAGE CREDIT: https://www.pexels.com/#belle-co-99483
.img-container {
width: 200px;
height: 150px;
border: 2px solid red;
border-radius: 10%;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
opacity: .7;
}
.selected {
//background-color: red;
}
img {
}
<div class="selected">
<div class="img-container">
<img
src="https://images.pexels.com/photos/1000445/pexels-photo-1000445.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="product-1-thumbnail"
/>
</div>
</div>
I want to display images in my div. I display different images according to the condition (if moviePoster true).
I moviePoster I display it, but if it is false, I display a image that informed that the file is not found.
I don't know why but when I display these 2 types of image, the moviePoster image, exceeding the size of the dive.
This is a screen from the issue in my application
.list {
border: 1px solid grey;
display: flex;
margin: 30px;
height: 230px;
border-radius: 10px;
box-shadow: 1px 1px 12px #555;
}
.list-img {
// border: 5px solid red;
width: 20%;
}
img {
height: 100%;
width: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
<div class="list">
<div class="list-img">
<div *ngIf="moviePoster; else notFound">
<img src="https://image.tmdb.org/t/p/w200/{{moviePoster}}" alt="...">
</div>
<ng-template #notFound>
<img src="../../assets/not_found.jpg" alt="...">
</ng-template>
</div>
img is a default display: inline, so height and width refers to inner content.
Anyway set image width and height usually stretches image, and that's orrible.
I suggest on using a div with the image setted as background, so use something like that:
html:
...
<div
*ngif="..."
class="thumbnail"
style="background-image: url(https://...{{ moviePoster }})"
></div>
...
css:
.thumbnail{
background-size: cover;
background-position: center;
}
You should apply this class also to #notFound.
One thing missing: thumbnail div must have height and width expressed
You can do that in multiple ways via css, depending on how have you structured the card box.
Hope it helps.
i think this is what you want :
if the image is null then the default background will show.
UPDATE: i have made it more dynamic
.list {
display: flex;
flex-direction: column;
}
.list-item {
height: 150px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 3px 2px rgba(0,0,0,.5);
}
.list-item + .list-item {
margin-top: 10px;
}
.list-img {
width: 200px;
height: 150px;
transition: background .5s ease;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://www.tourismselangor.my/wp-content/themes/Directory/images/noimage.jpg);
}
<div class="list">
<div class="list-item">
<div class="list-img" style="background-image: url(https://picsum.photos/200)"></div>
</div>
<div class="list-item">
<div class="list-img"></div>
</div>
<div class="list-item">
<div class="list-img" style="background-image: url(https://picsum.photos/200)"></div>
</div>
</div>
I've made a responsive image grid and am trying to add a hover effect to it so that the image gets a dark overlay and some text fades in on it. However, I've been having a tough time implementing it.
Here's my HTML structure.
<div class="tile">
<img src="some_image" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
And here's my CSS
.gallery .row .tile:hover ~ .tile img {
transform: scale(1.2);
}
However upon hovering over the image, it does not have the expected behaviour.
What's wrong?
EDIT
I got the hover effect to work and I can now fade in text.
Here's my code for that:
<div class="tile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate">
<div class="overlay">
<div class="text">Mahatma Gandhi</div>
</div>
</div>
CSS
.tile {
position: relative;
width: 100%;
}
.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: rgba(0, 0, 0, 0.8);
}
.tile:hover .overlay {
opacity: 1;
}
This seems to work but I think it doesnt have a certain "feel" to it. So I need to add a scale effect to the image. How can I do that
Here is a jsFiddle that i think will help you to resolve your issue: https://jsfiddle.net/mcs3yn1x/
HTML
<div class="tile">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
CSS
.tile {
border: 2px solid black;
}
.tile:hover img {
transform: scale(1.2);
}
Edit
After hearing alittle more about your issue I have created the following jsFiddle: https://jsfiddle.net/f1gzonjr/4/
HTML
<div class="tile">
<div class="container">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
</div>
CSS
.tile {
position: relative;
top: 0px;
left: 0px;
height: 300px;
width: 200px;
overflow: hidden;
border: 2px solid black;
}
.container:hover img{
transform: scale(1.2);
}
.overlay{
position: absolute;
display: none;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
}
.overlay p {
position: relative;
text-align: center;
color: #fff;
}
.tile:hover .overlay{
display: block;
}
Here is an alternate solution. Not sure if its what you wanted.
.tile:hover img, .tile.hover img {transform: scale(1.2);}
Here is the original answer that I adapted: Change background color of child div on hover of parent div?
-----EDIT-----
To stop it scaling and breaking responsiveness you will need to add a container around the image and then set overflow to none.
HTML:
<div class="tile">
<div class="img-container"><img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/16C0E/production/_109089139_928b0174-4b3f-48ff-8366-d118afa1ed56.jpg" class="animate"></div>
<div class="overlay">
<p>Mahatma Gandhi</p>
CSS:
.img-container{
width: 500px;
height: 500px;
overflow: hidden;
}
.tile:hover img, .tile.hover img {
transform: scale(1.2);
}
See the codepen below for an example
https://codepen.io/jamesCyrius/pen/pooqwwv
Here is a code
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 15px;
height: 15px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
<div class="zoom"></div>
I tried this from this question: Text over image using CSS transitions.
It's working fine in both IE11 and Firefox Quantum and in both sites the animation/transition works perfectly but when I try to visualize it in Chrome the text that should appear beneath the image and eventually hover it goes to the bottom of the page. The console also shows me zero errors.
My question resumes in if it is a CSS absolute attribute problem or something else.
Here's my code:
.size {
height: 150px;
width: 200px;
border: solid 1px orange;
overflow: hidden;
position: relative
}
.pic:hover > .text {
height: 190px;
}
.text {
position: absolute;
width: 200px;
height: 50px;
bottom: -40px;
right: 0;
left: 0px;
transition: height 0.7s ease-out;
background-color: #fed136;
overflow: hidden;
border: solid 1px #fed136;
padding: 10px;
}
.text > h4 {
text-align: center;
}
.block {
margin: 10px 10px 50px 10px;
float: left;
}
<div class="row">
<div class="block">
<div class="pic animated zoomIn">
<img src="someimage.jpg" class="size" />
<div class="text">
<h4>Some Title</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>
I'm using Bootstrap 3.3.5 and jQuery 2.1.4
I'm assuming that what you want is for the rollover text to be inside the image.
In this case I don't even know how it's working on IE11 or Firefox in your computer because here it fails on all browsers I have.
Your problem is basically that you are applying the CSS in the wrong element. Change .size to .pic in your CSS and it will get what you want.
Without position: relative inside .pic your position: absolute in .text is relative to the page itself (or the html element) and not the .pic element.
You also need overflow: hidden to hide any elements that go beyond the borders of the .pic element, thus hiding .text.
Added position relative & overflow as hidden to container div 'pic' and made height of div 'text' to zero. Its working fine in Chrome without any error and in IE too.
.size {
height: 150px;
width: 200px;
border: solid 1px orange;
overflow: hidden;
position:relative
}
.pic {
position:relative;
overflow:hidden;
}
.pic:hover > .text {
height: 190px;
}
.text {
position: absolute;
width: 200px;
height:0;
bottom: -40px;
right: 0;
left:0px;
transition: height 0.7s ease-out;
background-color: #fed136;
overflow: hidden;
border: solid 1px #fed136;
padding: 10px;
}
.text > h4 {
text-align:center;
}
.block {
margin:10px 10px 50px 10px;
float:left;
}
<div class="row">
<div class="block">
<div class="pic animated zoomIn">
<img src="someimage.jpg" class="size" />
<div class="text">
<h4>Some Title</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>
You can add properties for diferent browsers. First clear your cash and see if the problem is realy only i Chrome. Then you can create something like that :
#media screen and (-webkit-min-device-pixel-ratio:0) {
.container {-chrome-:only(;
property:value;
);}
This is a question for the CSS gurus. A trend at the moment seems to be to place an image in the background and then have a transparent content scroll over the top.
AIM
What technique is used to produce this result, where the top content is transparent and slides over a background image.
http://jsfiddle.net/spadez/2uUEL/9/embedded/result/
MY ATTEMPT
What I have tried to do is apply a background and then make the top section transparent on top of it.
http://jsfiddle.net/spadez/N9sCD/3/
body {
background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg";
}
#top {
height: 160px;
opacity:0.4;
filter:alpha(opacity=40);
}
#section {
height: 600px; background-color: blue;
}
QUESTION
How has this technique of a transparent div moving over a static background image been achieved in my first link and how can I reproduce it. It must be a CSS solution because it still works without javascript enabled.
Here's a FIDDLE
<div id="top">
<span class="mask">
<img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome">
Link 3
Link 2
Link 1
</span>
</div>
<div class="section l">
</div>
<div class="section d">
</div>
#top {
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed;
background-size: cover;
position: relative;
height: 400px;
}
#top a {
background: rgba(200,200,200,0.5);
display: block;
float: right;
margin: 10px 15px;
padding: 2px 5px;
text-decoration: none;
color: #111;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 8px;
transition: color 0.2s ease-in;
}
#top a:hover {
color: #fff;
}
.mask {
background: rgba(0,187,255,0.5); /* or hex combined with opacity */
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */
}
.logo {
position: relative;
width: 60px;
height: 60px;
margin: 10px;
}
.section {
height: 600px;
}
.l {
background: #ddd;
}
.d {
background: #333;
}
Update #top content placed inside .mask which removes need for z-index.
You were essentially correct in building but your CSS has some errors.
body {
background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */
background-size: cover cover; /* expands bg image to cover body */
}
#top {
height: 160px;
color: #fff; /* this just makes the text visible on your dark bg */
}
You don't need to set the opacity of #top because without a background set it will already be transparent.
Try this:
HTML - pushed the menu into its own div
<div id="top">
<div id="menu">
logo
link 1
link 2
</div>
</div>
<div id="section">
</div>
CSS - removed margin from body, set the background to a fixed position and to always cover the whole body, added background color to menu. Note that #top does not need a transparency as it is 100% transparent by default. If you want to get a 'colour washed' looking image it would be better to adjust the image itself rather than trying to re-create a colour overlay.
body {
margin: 0;
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed;
background-size: cover;
}
#top {
height: 500px;
}
#menu {
padding: 10px;
background-color: #fff;
}
#section {
height: 600px; background-color: blue;
}