I have these images in a simple responsive grid that I am trying to add an overlay for. When I hover on an image, id like to have 3 or 4 lines that give a general description. By default, the images show, and when I hover id like the text to appear ~ how might I do this?
Here is the current code that I have
<div class="container">
<div class="product-item">
<img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
</div>
</div>
.home-body .container {
display: flex;
flex-wrap: wrap;
justify-content: center !important;
margin: 5em 0 0 0;
}
.home-body img {
margin: 5px;
transition: all 1s;
}
.home-body img:hover {
transform: scale(1.05);
transition-duration: .3s;
filter: grayscale(20%);
opacity: 90%;
cursor: pointer;
}
.product-item {
background-color: #212121;
margin: 5px;
}
And here is what I think I could do, but dont know how to implement it with html/css
<div class="container ">
<img src="img.jpg" alt=" ">
<div class="overlay-text">
<h3>Random Title</>
<p>Random description</p>
<p>Random description</p>
<p>Random description</p>
</div
</div>
The simplest solution would be to:
Add 4 text tags which are used for the description you mentioned and assign a class to them.
Add display: none; to the class.
Add, for instance, display: block; to :hover of your class.
HTML:
<div class="container ">
<img src="img.jpg" alt=" ">
<div class="overlay-text">
<h3>Random Title</>
<p>Random description</p>
<p>Random description</p>
<p>Random description</p>
</div
</div>
CSS:
.overlay-text {
display: none;
}
.overlay-text:hover {
display: block;
}
Additionally:
If you want your image to be the background of the div, then remove
<img src="img.jpg" alt=" ">
from your HTML and add this to your overlay-text class in CSS:
background-image: url("img.jpg");
Is this what you are looking for.
.home-body .container {
display: flex;
flex-wrap: wrap;
justify-content: center !important;
margin: 5em 0 0 0;
}
.home-body img {
margin: 5px;
transition: all 1s;
}
.home-body img:hover {
transform: scale(1.05);
transition-duration: .3s;
filter: grayscale(20%);
opacity: 90%;
cursor: pointer;
}
.product-item {
background-color: #212121;
margin: 5px;
position: relative;
}
.home-body a .hover-text {
display: none;
}
.home-body a:hover .hover-text {
display: block;
position: absolute;
text-align: center;
color: #fff;
left: 10%;
top: 50%;
}
<body class="home-body">
<div class="container">
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
<div class="hover-text">
<h3>Gaming PC</h3>
<p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
</div>
</a>
</div>
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
<div class="hover-text">
<h3>Gaming PC</h3>
<p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
</div>
</a>
</div>
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
<div class="hover-text">
<h3>Gaming PC</h3>
<p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
</div>
</a>
</div>
</div>
</body>
Related
2 image appear in same time, up and down.
I want hover image display none.
Hover image is appear below primary image.
Primary image is hide when hover.
Seems like dont work. and really need help on this.
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-top" src="images/True Blue Asia.jpg"/>
<img class="card-img-top" src="images/Asia Bagus.jpg"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>
<div class="card">
<img src="/image_displayed_as_default" class="hover-hidden"/>
<img src="/image_displayed_when_hover" class="hover-only"/>
</div>
.card img {
opacity: 1;
transition: opacity 200ms;
}
.card:hover img.hover-hidden,
.card:not(:hover) img.hover-only {
opacity: 0;
}
You are looking for this
Pure CSS solution
#aks {
width:0px;
height:0px;
background:url('http://dummyimage.com/100x100/000/fff');
padding:50px;
}
#aks:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
<img id="aks" src="http://dummyimage.com/100x100/000/fff"/>
Your code solution
Issue i you are not hide second image initially
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
.card a .card-img-below{
display: none;
}
.card a:hover .card-img-below {
display: block;
}
a{
display:block;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-above" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class="card-img-below" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>
Change the image url
I seem to be having some issues having problems aligning three images to the centre at once, i have the float: left property but when removing that, the images stack on top of each other on the left side of the page. As you could probably tell from the code I was only worried about circle and column and not column2 and circle2 as I was using the first row to see if I could get the correct result and then apply it to the second row as well.
UPDATE:
ISSUE WAS FIXED.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure {
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 2%;
}
.rowfirst {
flex: 1 1 25%;
margin: 20px 10px;
width: 20.00%;
padding: 6px;
image-orientation: from-image;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-radius: 2%;
pointer-events: none;
}
.rowsecond {
flex: 1 1 25%;
margin: 20px 10px;
width: 20.00%;
padding: 6px;
image-orientation: from-image;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-radius: 2%;
pointer-events: none;
}
.rowfirst:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.rowsecond:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
/* Clearfix (clear floats) */
.container {
content: "";
clear: both;
image-orientation: from-image;
padding: 60px;
display: flex;
flex-wrap: flex-start;
}
<h1>Portfolio</h1>
</head>
<div class="container">
<div class="rowfirst">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
</div>
<div class="rowfirst">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowfirst">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="container">
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
</div>
</div>
</body>
</html>
Adam.
You can use the code below, as your case is related to images inside a container block:
.circle {
margin: 2%;
image-orientation: from-image;
text-align:center;
}
In case you wish to align images as inline elements, you should use the properties below:
display: block;
margin: 0 auto;
As you commented that the solution above did not work, I suggest that you use it with flex-box approach - With flex-box, you will have images centralized in the middle of the rows (and page). The rows will also be responsive. Try the code below:
<!DOCTYPE html>
<html>
<style>
.item {
flex: 1 1 25%;
margin: 20px 10px;
text-align: center;
}
.container {
padding: 60px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
</style>
<head>
<title>Page Title</title>
</head>
<body>
<div class="container">
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
</div>
</body>
</html>
Cheers
I am trying to align an icon with some text like this:
however it comes out like this:
.percent {
float: right;
display: inline-block;
position: relative;
}
.card-icon {
float: left;
}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<p class="percent"> <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face"> 1% </p>
EDIT ****
With the last answer provided it shows up like this:
.card-icon {float: left;margin-right:10px; }
<style type="text/css">
</style>
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class = "percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt"> 1% </div>
</div>
</div>
</div>
Try to use inline-block instead of floats:
.card-icon {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
}
.card-icon:after {
content: "=";
position: absolute;
right: -16px;
top: 50%;
transform: translateY(-50%);
}
.percent .card-txt:nth-of-type(1) {
text-align: center;
}
.card-txt {
display: inline-block;
vertical-align: middle;
text-align: center;
margin-left: 24px;
}
.block {
display: block;
}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class="percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt">
<span class="block">1%</span>
<span class="block">service tax + VAT</span>
</div>
</div>
</div>
</div>
Sometimes the best solution is an old solution. Using HTML tables allows you to control vertical height with a high level of browser support, and backwards compatibility. Using this approach also make the element responsive. Other solutions that adopt the relative/absolute position method can suffer when resizing browser window size.
table {
margin: 0 auto;
border: 1px solid blue;
}
table tr td {
padding: 10px;
width: 100px;
text-align: center;
vertical-align: middle;
position: relative;
}
table tr .number-cell {
padding-top:10px;
width: 80px;
}
table tr .number-cell .value {
margin-top: 4px;
font-size: 42px;
}
table tr .number-cell .sub-heading {
background: grey
}
table tr .equal-cell {
width: 0px;
}
table tr td img {
width: 100%;
}
<div>
<h1>MY WEBSITE</h1>
<table>
<tr>
<td class="image-cell">
<img src="https://www.fillmurray.com/100/100"/>
</td>
<td class="equal-cell">
<span class="equal">=</span>
</td>
<td class="number-cell">
<div class="value">1%</div>
<div class="sub-heading">service fee</div>
</td>
</tr>
</table>
</div>
.card-icon {float: left;position:relative;z-index:1; }
.card-icon:after {content:"=";position:relative; left:25px;}
.percent .card-txt:nth-of-type(1) {text-align:center;position:relative; left:-55px;}
.card-txt {text-align:center; width:400px;background:#ddd;}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class = "percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt"> 1% </div>
<div class="card-txt"> service tax + VAT </div>
</div>
</div>
</div>
If you want more controle you can use flex styling. An example:
.card {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
width: 500px;
}
.card-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
background-color: blue;
color: white;
font-size: 24px;
}
.card-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: gray;
}
.card-header > img {
position: absolute;
right: 0;
width: 50px;
height: 50px;
}
<div class="card">
<div class="card-header">
<span>Self Managed</span>
<img src="app/assets/images/star.png" alt="">
</div>
<div class="card-content">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<span>1%</span>
</div>
</div>
Hi guys so i am trying to get some text to appear below a picture i have using bootstrap version 3
So far i have :
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><img alt="my image" class="img-about" src="Images/s1.fw.png"></div>
<div class="col-md-3">
<h2>aa</h2>
</div>
But so far its appearing side by side, but i would like it to appear below each other So the picture on the top and then text below e.g
Picture
-Text
Thanks
If you want your text to be underneath the image, don't put it in the separate column.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<img alt="my image" class="img-about" src="Images/s1.fw.png"></div>
<h2>aa</h2>
<div class="col-md-3">
// Use this for seconfd image in the right of the 1st one.
</div>
</div>
If your looking for a different approach. More
p {
font-family: 'Noto Sans', sans-serif;
font-size: 1.1em;
line-height: 1.5em;
color: #666;
}
img {
max-width: 100%;
height: auto;
margin: 5px 0 50px;
}
.grid {
display: -webkit-flex;
display: flex;
}
.col {
padding: 30px;
}
.fluid-flex {
-webkit-flex: 1;
flex: 1;
/* Not supported by Safari */
}
<div class="grid">
<div class="col fluid-flex">
<h1>My Image 1</h1>
<img src="https://s.zkcdn.net/Advertisers/cd7db6dc529e4cd3a3b9483b34465631.png" alt="Image" title="Image" />
<p>This was taken when i was in TX.
</p>
</div>
<div class="col fluid-flex">
<h1>My Image 2</h1>
<img src="https://s.zkcdn.net/Advertisers/cd7db6dc529e4cd3a3b9483b34465631.png" alt="Image" title="Image" />
<p>This was taken when i was in CA.
</p>
</div>
<div class="col fluid-flex">
<h1>My Image 3</h1>
<img src="https://s.zkcdn.net/Advertisers/cd7db6dc529e4cd3a3b9483b34465631.png" alt="Image" title="Image" />
<p>This was taken when i was in NY.
</p>
</div>
Without bootstrap:
.wrapper {
width: 150px;
border:1px solid #ccc;
padding: 10px;
}
img {
width: 100%;
border: 1px solid #ccc;
padding: 2px;
}
h2 {
text-align: center;
}
<div class="wrapper">
<img alt="my image" class="img-about" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<h2>Some Text</h2>
</div>
I have created a grid of images with a hover effect. When you hover over the images it zooms in. It is working fine on safari but when I try it out on google chrome the images disappear when you hover over them instead of the zoom effect. I have provided my code below.
HTML :
<body>
<div class="message0">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
Wakeup And Makeup <img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
</div>
<div class="masonry">
<div class="fader0">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_113634307.jpg?3027373344113436523" />
</div>
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://vipera-nyc.myshopify.com/collections/eyeshadow"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Vipera_cae46bcd-7bd4-4ed6-ab7d-5970f5d6fa44.jpg?5440451544572147338" /></a>
</div>
</div>
<div class="fader1">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_313764047.jpg?453596164489734443" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/HelloG-5.jpg?7272790211589801407" />
</div>
<div class="fader">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/EYEScool.jpg?3027373344113436523" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_91130072.jpg?3027373344113436523" />
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Makeup-2.jpg?7468684895134417704" />
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://twitter.com/ViperaNYC"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Tweet_us_your_look.jpg?453596164489734443" /></a>
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/glosssssss_5c5c5520-ea20-4c78-8830-e633e5bb1083.jpg?1992342090983963689" />
</div>
<div class="item">
<div class="my-wrapper">
<a
href="https://vipera-nyc.myshopify.com/collections/best-selling-products">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Best_Selling_Products-3.jpg?887070778965157300" />
</a>
</div>
</div>
</div>
</body>
CSS:
.item img { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.itemkat img {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width:100%;
}
.grid {
column-count: 3;
-webkit-column-gap: -10px; /* Chrome, Safari, Opera */
-moz-column-gap: -10px; /* Firefox */
column-gap: -10px;
line-height:100%;
}
.grid-item{
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.message0
{
display:center;
font-size:30px;
}
.my-wrapper {
background-color: #f2f2f2;
}
.my-wrapper:hover img {
opacity:0.2;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
/* margin: 0%; /*makes left margin closer */
overflow: hidden;
width: 470px;
}
.item img {
max-width: 100%; /*reduces space between images */
overflow: hidden;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
overflow: hidden;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.message0 {
font-family: Brush Script MT ;
font-size:120px;
text-align:center;
color:black;
letter-spacing: 5px;
}
I have provided a fiddle. ***IT WORKS ON OTHER INTERNET BROWSERS BUT NOT GOOGLE CHROME WHICH IS THE PROBLEM****
https://jsfiddle.net/getMecoffee56/o11hmwek/1/