I am working on app, which used to create some reports.
App allows user to choose Page size from A3, A4 and letter.
I'm Using #media query for Printing. I found the mysterious whitespace at bottom of the page. I want to get ride of that.
Here is my Snippets.
Index.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>report</title>
<link rel="stylesheet" type="text/css" href="/js/bootstrap.min.css">
<script src="/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/js/style.css">
<style>
#media print {
#page {
margin: 0 !important;
size: A3 portrait;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.page {
margin: 0 !important;
margin-bottom: 0 !important;
page-break-after: always !important;
}
}
</style>
</head>
<body>
<div class="report">
<div class="page cover A3 portrait">
<div>
<div class="coverpage">
<div class="artA">
<div class="logo"></div>
</div>
<div class="infoBox">
<div class="artB"></div>
<div class="elements">
<div class="title">
<span>Report Name</span>
</div>
<div class="createdBy">
<span>John Doe</span>
</div>
<div class="createdDate">
<span>26-08-19 22.16.55.348 IST</span>
</div>
<div class="dateRange">
<p>Date Range: <span>now-2y</span> <span>now</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="page A3 potrait ">
<div class="pageHeader">
<div class="headerContent"><span>Page Header</span></div>
</div>
<div style="height: 100%;">
<div cdkdroplist="" class="col-md-12 layout gridster cdk-drop-list fit" id="cdk-drop-list-16"
style="padding: 10px 20px;">
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(0px, 0px, 0px); width: 536px; height: 490.667px;"
id="BarChart_0_0">
<div class="chartHeading" style="cursor:pointer;" id="BarChart_0_0_title"> BarChart_0_0
</div>
<div class="svg-container" id="BarChart_0_0_cc"></div>
</div>
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(546px, 0px, 0px); width: 536px; height: 490.667px; margin-right: 20px;"
id="HorizontalBarChart_0_1">
<div class="chartHeading" style="cursor:pointer;" id="HorizontalBarChart_0_1_title">
HorizontalBarChart_0_1 </div>
<div class="svg-container" id="HorizontalBarChart_0_1_cc"></div>
</div>
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(0px, 1001px, 0px); width: 536px; height: 490.667px; margin-bottom: 10px;"
id="PieChart_0_2">
<div class="chartHeading" style="cursor:pointer;" id="PieChart_0_2_title"> PieChart_0_2
</div>
<div class="svg-container" id="PieChart_0_2_cc"></div>
</div>
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(546px, 501px, 0px); width: 536px; height: 490.667px; margin-right: 20px;"
id="RingChart_0_3">
<div class="chartHeading" style="cursor:pointer;" id="RingChart_0_3_title"> RingChart_0_3
</div>
<div class="svg-container" id="RingChart_0_3_cc"></div>
</div>
<div class=""
style="transform: translate3d(0px, 1001px, 0px); width: 536px; height: 490.667px; margin-bottom: 10px;">
</div>
</div>
</div>
<div class="pageFooter">
<div class="footerContent"><span></span> <span> Page Footer</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.A4 {
width: 210mm !important;
height: 297mm !important;
}
.A4.landscape {
width: 297mm !important;
height: 210mm !important;
}
.A3 {
width: 297mm !important;
height: 420mm !important;
}
.A3.landscape {
width: 420mm !important;
height: 297mm !important;
}
.letter {
width: 216mm !important;
height: 279mm !important;
}
.letter.landscape {
width: 279mm !important;
height: 216mm !important;
}
.bodyCanvas{
height: 100%;
}
.page{
margin:20px auto;
position: relative;
width:fit-content;
display:flex;
flex-direction: column;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
.pageHeader{
background: #324156;
margin-top: 0px !important;
height: 40px;
top: 0;
width: 100%;
}
.pageFooter{
height:40px;
background: #324156;
bottom: 0;
}
.headerContent {
padding:10px;
}
.footerContent {
padding: 5px;
}
Whitespace after the footer div with Print as shown in attached image.
You can emulate print mode by clicking opening DevTools main menu, picking More Tools > Rendering, and then setting it to "print". Then you'll be able to use the regular element inspector to click on that padding (see this answer for visual guide).
[testing the provided HTML+CSS alone, I do not get the demonstrated padding]
Related
I want to create a #necker div with the same height, and width, and to center him the same way as my #header div that fixed to top of screen.
I tried to copy the data from the #header div to #necker div and margin in down from top. Failed :(. Could you help me?
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
The div can't center the same as the menu, because the position: fixed casues it to ignore the default margin from the browser stylesheet. If you add margin: 0 to body the two elements will be centered in the same spot.
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
body {
margin: 0;
}
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
<div class="makeitscroll"></div>
What's exactly what you are not expecting from your code? If the problem is that the two div hasn't got the same width, try removing the margin and padding from the body (so 80% results in both cases in the same number of pixels).
The fixed block use the complete viewport width to calculate the 80%, instead, the #necker use the body width (using the default margin or padding that the browser is applying)
body{
margin: 0px;
padding: 0px;
}
If that's not your problem, I can't see what you need to achieve, please, could you be more specific?
I believe below solution will help you. Thing you missed is default margin <body> has. Deleting it fixes the issue.
Key part
body {
margin: 0;
}
Snippet
body {
margin: 0;
}
#header {
position: fixed;
display: inline-block;
top: 0px;
margin: 0 10%;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
I have been trying to align four images that are to be displayed as the pic below. But I have been getting spaces after each row. How can I remove them?
Also is there a way that I can add a small thumbnail of the example image in the middle where all four images meet?
Along with this I am also trying to add captions over the images. Currently they are displayed below the images. How can I add them over the images?
<!DOCTYPE html>
<html>
<body alink="ff0000" bgcolor="ffffff" link="0000ff" text="000000" vlink="800080">
<div>
<div class="transbox" style="width: 50%; height=50%; float: left;">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" width="100%" />
<div style=" text-align: center; vertical-align: middle;">
<center>
<font color="Black" size="+2">correct one</font>
</center>
</div>
</div>
</div>
<div>
<div class="transbox" style="width: 50%; height=50%; float: right;">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
</div>
</div>
</div></body>
</html>
JSFiddle link:
https://jsfiddle.net/8bL4qqr8/
body{
background-color:"ffffff";
}
.img-grid{
width: 50%;
float:left;
height:400px;
}
.img-grid img{
width :100%;
height:400px;
}
.caption{
display :none;
}
.img-grid:hover .caption{
text-align: center;
display:block;
background: #000;
color: #fff;
font-size:16px;
font-weight: bold;
margin-top: -100px;
padding: 10px;
}
<div class="transbox img-grid">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
<div class="caption">
<p>Looking into the future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
You have a lot of deprecated stuff in your HTML. Don't use all this link, text stuff in your body. And not <center> or <font> otherwise. I made a simple snippet of the stuff your wanted with flexbox. I modified your code a bit. You can find browser support for flexbox here: http://caniuse.com/#search=flexbox
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.transbox {
position: relative;
flex: 1 0 50%;
width: 50%;
margin: 0;
padding: 0;
}
.transbox .thumbnail {
display: block;
position: absolute;
width: 100px;
height: 75px;
}
.transbox:nth-of-type(1) .thumbnail {
bottom: 0;
right: 0;
}
.transbox:nth-of-type(2) .thumbnail {
bottom: 0;
left: 0;
}
.transbox:nth-of-type(3) .thumbnail {
top: 0;
right: 0;
}
.transbox:nth-of-type(4) .thumbnail {
top: 0;
left: 0;
}
.transbox img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
float: left;
margin: 0;
padding: 0;
border: 0;
}
.transbox .text {
position: absolute;
width: 100%;
text-align: center;
color: #FFFFFF;
}
<div class="wrapper">
<div class="transbox">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
<div class="thumbnail">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
<div class="thumbnail">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
</div>
<div class="text">
<p>Looking into the future</p>
</div>
</div>
<div class="transbox">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
<div class="thumbnail">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
<div class="thumbnail">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
</div>
Hope this is what you were looking for
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
float: left;
border: 1px solid #333;
overflow: hidden;
width: 50%;
height: 50%
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
h1 {
color: white;
margin: 0;
padding: 20px;
}
html, body { height: 100%; padding: 0; margin: 0; }
</style>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="grow" style=" width: 40%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;">
<div>
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" />
</div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/IT-1.jpg" alt="pepsi">
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/RealEstate1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/VentureCapital-1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/Construction-1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div style=" width: 20%; position: fixed; top: 25%; left: 25%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Construction/Interior Design - Build to Live
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 25%; left: 75%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Real Estate - Buy and Sell Potential Properties
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 75%; left: 25%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Information Technology - Handling Potential IT Projects
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 75%; left: 75%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Venture Capital - Finance for High Growth Potential
</h1>
</div>
</div>
<div class="grow" style=" width: 20%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;">
<div>
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" />
</div>
</div>
</body>
</html>
I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}
The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}
I have the following snippet
.striped {
height : 30px;
margin-right: 1px !important;
background: repeating-linear-gradient(-45deg,#E4003D,#E4003D 10px,#222 10px,#222 20px)!important;
}
.content{
height : 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color:#363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
}
.rightpadding{
margin-right: 1px !important;
}
.top-buffer {
margin-top:13px;
overflow: hidden;
}
.bottom {
vertical-align: bottom;
bottom: 0 !important;
}
.nolrpadding{
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box{
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row{
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5">
<!-- <div class="row rightpadding"> -->
<div class="row striped"></div>
<div class="row rightpadding">
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
</div>
<div class="row striped bottom"></div>
<!-- </div> -->
</div>
<div class="col-xs-7">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>
the problem that I have is the bottom alignments in the two columns, as shown in the image
I have seen fixes for column vertical alignments but it seems that they do not work here, so how can I align the bottom of the three rows within the first column with the next column?
thanks in advance,
es.
UPDATE
I would like it to look something like this with the bottom strip row being vertically aligned with the bottom of the red box.
managed to do what you wanted with just a little jq . hope you don't mind
check here jsfiddle
css code added : .mymedia { height:100%;}
jq code added :
var result = $(".col-xs-7").height() - $(".row.striped").height()*2
$(".row.rightpadding").height(result)
result = height of the right col - the heights of both striped rows ( which are equal i presume )
then add that height to the middle row ( .row.rightpadding )
let me know if it helps.
You should be able to achieve what you want by using absolute positioning, with fixed top and bottom so that the left column elements are "snapped" to the height of the row.
Try the snippet below.
.striped {
height: 30px;
background: repeating-linear-gradient(-45deg, #E4003D, #E4003D 10px, #222 10px, #222 20px)!important;
position: absolute;
left: 0;
right: 15px;
}
.content {
height: 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color: #363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
top: 30px;
bottom: 30px;
left: 0;
right: 15px;
position: absolute;
margin-top: 0 !important;
}
.top-buffer {
margin-top: 13px;
overflow: hidden;
}
.bottom {
bottom: 0 !important;
}
.nolrpadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box {
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before {
content: "";
display: block;
padding-top: 100%;
}
.square-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row {
overflow: hidden;
position: relative;
}
.myLeftCol {
bottom: 0;
padding-left: 0 !important;
position: absolute !important;
top: 0;
}
.myRightCol {
margin-left: 41.6667%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5 myLeftCol">
<div class="striped"></div>
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
<div class="striped bottom"></div>
</div>
<div class="col-xs-7 myRightCol">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>
Wrap everything in a <div>, and set the childs to have min-height: 100%
I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using real text instead of an image.
I've tried a few different things but I can't seem to figure out how to do it. I'm trying to do it using HTML and CSS only, but I'm not sure if that's possible.
Feel free to poke around in my code, I'll paste what I think is relavent here.
HTML
div#projectlist {
width: 770px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 40px;
}
div#buzzbutton {
display: block;
float: left;
margin: 2px;
background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
}
div#buzzbutton:hover {
background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
div#slinksterbutton {
display: block;
float: left;
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
margin: 2px;
}
div#slinksterbutton:hover {
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
<div id="projectlist">
<div id="buzzbutton">
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" />
</div>
<div id="slinksterbutton">
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" />
</div>
</div>
It's simple. Wrap the image and the "appear on hover" description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div.
/* quick reset */
* {
margin: 0;
padding: 0;
border: 0;
}
/* relevant styles */
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">This image looks super neat.</p>
</div>
A nice fiddle: https://jsfiddle.net/govdqd8y/
EDIT:
There's another option if you don't want to explicitly set the height of the <img> on the wrapping <div>, and that is simply setting the <div>'s display to inline-block. (Keep in mind, though, that it won't look good if the image fails to load.)
If you choose this option, you'll notice that there'll be a slight spacing between the <img> and the bottom of the wrapping <div>. That's because of the <img>'s default vertical-align value of baseline. If you set it to bottom it will disappear.
Here's a fiddle using this option: https://jsfiddle.net/joplomacedo/5cL31o0g/
In your HTML, try and put the text that you want to come up in the title part of the code:
<a href="buzz.html" title="buzz hover text">
You can also do the same for the alt text of your image.
You can also use the title attribute in your image tag
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" title="hover text" />
This is what I use to make the text appear on hover:
* {
box-sizing: border-box
}
div {
position: relative;
top: 0px;
left: 0px;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
text-align: center
}
img {
width: 400px;
height: 400px;
position: absolute;
border-radius: 50%
}
img:hover {
opacity: 0;
transition:opacity 2s;
}
heading {
line-height: 40px;
font-weight: bold;
font-family: "Trebuchet MS";
text-align: center;
position: absolute;
display: block
}
div p {
z-index: -1;
width: 420px;
line-height: 20px;
display: inline-block;
padding: 200px 0px;
vertical-align: middle;
font-family: "Trebuchet MS";
height: 450px
}
<div>
<img src="https://68.media.tumblr.com/20b34e8d12d4230f9b362d7feb148c57/tumblr_oiwytz4dh41tf8vylo1_1280.png">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing <br>elit. Reiciendis temporibus iure dolores aspernatur excepturi <br> corporis nihil in suscipit, repudiandae. Totam.
</p>
</div>
.container {
position: relative;
width: 50%;
}
.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: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
<img src="http://lorempixel.com/500/500/" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Reference Link W3schools with multiple styles
HTML
<img id="close" className="fa fa-close" src="" alt="" title="Close Me" />
CSS
#close[title]:hover:after {
color: red;
content: attr(title);
position: absolute;
left: 50px;
}
I saw a lot of people use an image tag. I prefer to use a background image because I can manipulate it. For example, I can:
Add smoother transitions
save time not having to crop images by using the "background-size: cover;" property.
The HTML/CSS:
.overlay-box {
background-color: #f5f5f5;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.overlay-box:hover .desc,
.overlay-box:focus .desc {
opacity: 1;
}
/* opacity 0.01 for accessibility */
/* adjust the styles like height,padding to match your design*/
.overlay-box .desc {
opacity: 0.01;
min-height: 355px;
font-size: 1rem;
height: 100%;
padding: 30px 25px 20px;
transition: all 0.3s ease;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
<div class="overlay-box" style="background-image: url('https://via.placeholder.com/768x768');">
<div class="desc">
<p>Place your text here</p>
<ul>
<li>lorem ipsum dolor</li>
<li>lorem lipsum</li>
<li>lorem</li>
</ul>
</div>
</div>
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nelsonleite/pen/RaGwba?depth=everything&order=popularity&page=4&q=product&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style class="cp-pen-styles">.product-description {
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
perspective: 1000;
backface-visibility: hidden;
}
body {
color: #212121;
}
.container {
padding-top: 25px;
padding-bottom: 25px;
}
img {
max-width: 100%;
}
hr {
border-color: #e5e5e5;
margin: 15px 0;
}
.secondary-text {
color: #b6b6b6;
}
.list-inline {
margin: 0;
}
.list-inline li {
padding: 0;
}
.card-wrapper {
position: relative;
width: 100%;
height: 390px;
border: 1px solid #e5e5e5;
border-bottom-width: 2px;
overflow: hidden;
margin-bottom: 30px;
}
.card-wrapper:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card-wrapper:hover:after {
opacity: 1;
}
.card-wrapper:hover .image-holder:before {
opacity: .75;
}
.card-wrapper:hover .image-holder:after {
opacity: 1;
transform: translate(-50%, -50%);
}
.card-wrapper:hover .image-holder--original {
transform: translateY(-15px);
}
.card-wrapper:hover .product-description {
height: 205px;
}
#media (min-width: 768px) {
.card-wrapper:hover .product-description {
height: 185px;
}
}
.image-holder {
display: block;
position: relative;
width: 100%;
height: 310px;
background-color: #ffffff;
z-index: 1;
}
#media (min-width: 768px) {
.image-holder {
height: 325px;
}
}
.image-holder:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #4CAF50;
opacity: 0;
z-index: 5;
transition: opacity 0.6s;
}
.image-holder:after {
content: '+';
font-family: 'Raleway', sans-serif;
font-size: 70px;
color: #4CAF50;
text-align: center;
position: absolute;
top: 92.5px;
left: 50%;
width: 75px;
height: 75px;
line-height: 75px;
background-color: #ffffff;
opacity: 0;
border-radius: 50%;
z-index: 10;
transform: translate(-50%, 100%);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease-out;
}
#media (min-width: 768px) {
.image-holder:after {
top: 107.5px;
}
}
.image-holder .image-holder__link {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
}
.image-holder .image-holder--original {
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.image-liquid {
width: 100%;
height: 325px;
background-size: cover;
background-position: center center;
}
.product-description {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
padding: 10px 15px;
overflow: hidden;
background-color: #fafafa;
border-top: 1px solid #e5e5e5;
transition: height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 2;
}
#media (min-width: 768px) {
.product-description {
height: 65px;
}
}
.product-description p {
margin: 0 0 5px;
}
.product-description .product-description__title {
font-family: 'Raleway', sans-serif;
position: relative;
white-space: nowrap;
overflow: hidden;
margin: 0;
font-size: 18px;
line-height: 1.25;
}
.product-description .product-description__title:after {
content: '';
width: 60px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fafafa);
}
.product-description .product-description__title a {
text-decoration: none;
color: inherit;
}
.product-description .product-description__category {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-description .product-description__price {
color: #4CAF50;
text-align: left;
font-weight: bold;
letter-spacing: 0.06em;
}
#media (min-width: 768px) {
.product-description .product-description__price {
text-align: right;
}
}
.product-description .sizes-wrapper {
margin-bottom: 15px;
}
.product-description .color-list {
font-size: 0;
}
.product-description .color-list__item {
width: 25px;
height: 10px;
position: relative;
z-index: 1;
transition: all .2s;
}
.product-description .color-list__item:hover {
width: 40px;
}
.product-description .color-list__item--red {
background-color: #F44336;
}
.product-description .color-list__item--blue {
background-color: #448AFF;
}
.product-description .color-list__item--green {
background-color: #CDDC39;
}
.product-description .color-list__item--orange {
background-color: #FF9800;
}
.product-description .color-list__item--purple {
background-color: #673AB7;
}
</style></head><body>
<!--
Inspired in this dribbble
https://dribbble.com/shots/986548-Product-Catalog
-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-xs-12 col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-xs-12 col-sm-4 product-description__price">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Jeans_BW_2_(3213391837).jpg/543px-Jeans_BW_2_(3213391837).jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-sm-4 product-description__price text-right">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b8/Columbia_Sportswear_Jacket.jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-sm-4 product-description__price text-right">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('http://www.publicdomainpictures.net/pictures/20000/nahled/red-shoes-isolated.jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-sm-4 product-description__price text-right">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
</div>
</div>
</body></html>
The sample is made
<html>
<head>
<style>
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
</style>
</head>
<body>
<h2>Display an Element on Hover</h2>
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
</body>
</html>
For accessibility reasons, you should use the correct semantic tags. Use a figure as a container and include the text to the image as figcaption.
Apply position: absolute to the container and then position: absolute to the figcaption.
Simply hide the figcaption with display: block and make it visible again by using :hover on the wrapping figure element.
figure {
position: relative;
}
figcaption {
position: absolute;
inset: 2px;
display: none;
}
figure:hover figcaption {
display: flex;
}
/* for visualization only */
figure {
display: inline-block;
}
figcaption {
padding: 1em;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.7);
}
img {
border: 2px dashed red;
}
<figure>
<img src="https://via.placeholder.com/200.jpg" alt="placeholder image used for demonstration">
<figcaption>placeholder image used for demonstration</figcaption>
</figure>