This is my first post on Stack Overflow.
Basically, I'm trying to create an image gallery including car pictures and information about the cars.
I created a table with details about the car that I want to be visible when I hover over the image.
I tried working with opacity but that doesn't seem to work. Or am I doing something wrong?
Do I have to use JavaScript to show/hide the tables, then please advise.
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Gallery</title>
</head>
<body>
<div class="ImageGallery">
<div class="image">
<div class="imagehover">
<img src="C:/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/LaFerrari.jpg" alt="Ferrari_LaFerrari">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari LaFerrari</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/812_Superfast.jpg" alt="Ferrari_812_Superfast">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari 812 Superfast</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/488_GTB.jpg" alt="Ferrari_488_GTB">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/488_Pista.jpg" alt="Ferrari_488_Pista">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso.jpg" alt="Ferrari_GTC4Lusso">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso_T.jpg" alt="Ferrari_GTC4Lusso_T">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/Portofino.jpg" alt="Ferrari_Portofino">
</div>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ImageGallery{
display: flex;
flex-wrap: wrap;
}
.image {
position: relative;
display: flex;
flex: 100%;
padding: 1em;
justify-content: center;
align-items: center;
}
.imagehover:hover {
opacity: 0.1;
transition: 1s ease;
}
.imagehover:hover .imageinfo{
opacity: 0.5;
z-index: 2;
}
.imageinfo{
position: absolute;
opacity: 0;
}
.imageinfo table{
background-color: #FFFFFF;
}
.imagehover td{
padding: 0.5em;
}
.imageinfo:hover{
transition: 0.5s ease;
}
.centered-text{
position: absolute;
top: 15%;
left: 42.5%;
transform: translate(-50%, -50%);
}
#media screen and (min-width: 1024px){
.ImageGallery{
flex-direction: row;
}
.image{
flex: 50%;
}
}
try this code..hope this code will work !!!
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ImageGallery{
display: flex;
flex-wrap: wrap;
}
.image {
position: relative;
display: flex;
flex: 100%;
padding: 1em;
justify-content: center;
align-items: center;
}
.imagehover{
transition: all 0.5s linear;
}
.imagehover:hover .imageinfo{
opacity: 1;
z-index: 2;
}
.imageinfo{
position: absolute;
opacity: 0;
transition: all 0.5s linear;//added
}
.imageinfo table{
background-color: #FFFFFF;
}
.imagehover td{
padding: 0.5em;
}
.imageinfo:hover{
opacity: 1; //added
/* transition: 0.5s ease; *///remove
}
.centered-text{
position: absolute;
top: 15%;
left: 42.5%;
transform: translate(-50%, -50%);
}
#media screen and (min-width: 1024px){
.ImageGallery{
flex-direction: row;
}
.image{
flex: 50%;
}
}
<div class="ImageGallery">
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_LaFerrari">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari LaFerrari</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_812_Superfast">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari 812 Superfast</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_GTB">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_Pista">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso_T">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_Portofino">
</div>
</div>
</div>
I Have Updated This Code Hope This Will Work For You.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ImageGallery{
display: flex;
flex-wrap: wrap;
}
.image {
position: relative;
display: flex;
flex: 100%;
padding: 1em;
justify-content: center;
align-items: center;
}
.imagehover{
transition: all 0.5s linear;
}
.imagehover:hover .imageinfo{
opacity: 0.5;
z-index: 2;
}
.imageinfo{
position: absolute;
opacity: 0;
transition: all 0.5s linear;//added
}
.imageinfo table{
border: 1px solid #000;
background-color: #FFFFFF;
position: absolute;
top: -23px;
}
.imagehover td{
padding: 0.5em;
border: 1px solid #000;
}
.imageinfo:hover{
opacity: 0.5; //added
/* transition: 0.5s ease; *///remove
}
.centered-text{
position: absolute;
top: 15%;
left: 42.5%;
transform: translate(-50%, -50%);
}
#media screen and (min-width: 1024px){
.ImageGallery{
flex-direction: row;
}
.image{
flex: 50%;
}
}
<div class="ImageGallery">
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_LaFerrari">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari LaFerrari</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_812_Superfast">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari 812 Superfast</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_GTB">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_Pista">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso_T">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_Portofino">
</div>
</div>
</div>
Run code snippetHide results
Related
I have some boxes of div element; each of the box I would like to have text of .... underneath, center-aligned .
This is what I already have:
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>
Here is final result I tried to achieve
Yet, I could not have ..... text underneath the box correctly. Thanks.
What about using flex?
It's a bit hacky to get it beneath to box but there you go.
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-flex;
align-items: flex-end;
justify-content: center;
}
.box p {
position: relative;
bottom: -25px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>
I have also a solution just with edit on the p.
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-block;
}
.box>p{
display: flex;
justify-content: center;
align-items: flex-end;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>
You can make the p element absoultely positioned, with position: relative for the .box element and according position settings as in the example below:
.box {
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-block;
margin-bottom: 30px;
}
.box p {
position: absolute;
bottom: -30px;
left: 0;
right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>
I have dynamically generated content into DIVs and need DIVs widths to get adjusted depending on the content in the DIV by two preset values.
It should work like this: if we have a long content - the width should be = 960px, if there is a very few contents - just 480px.
So only two values and only two variations of the width: 960px or 480px.
* {
box-sizing: border-box;
}
.page-list-img {
clear: both;
width: 100px;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
padding: 5px !important;
opacity: 1.0;
transition: opacity 500ms;
}
.page-list-img:hover {
opacity: 0.5;
transition: opacity 500ms;
}
.button-page-list-p {
text-align: left;
}
span.lister {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.page_list_container {
width: 960px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
}
.column2 table {
border: none;
width: 100%;
height: 130px;
}
.column2 table td {
border-style: none !important;
vertical-align: middle;
}
.column1 {
text-align: center;
line-height: 130px;
float: left;
width: 150px;
padding-left: 10px;
height: 130px;
}
.column2 {
border-left: solid 0.7px #ddd;
text-align: justify;
/*line-height: 130px;*/
float: initial;
/* width: 789px; */
padding-left: 10px;
height: 130px;
display: table;
}
.row-lister {
min-inline-size: 460px;
max-inline-size: 100%;
/*float: left;*/
border-radius: 2px;
background-color: #f9f9f9;
border-top: solid 0.7px #ddd;
border-bottom: solid 0.7px #ddd;
border-left: solid 0.7px #ddd;
border-right: solid 0.7px #ddd;
/*width: 940px;*/
/* width:460px; */
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
flex-grow: 1;
}
<div class="page_list_container">
<div class="row-lister">
<div class="column1">
<span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here..... This is also a bit longer</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here longer a bit ...</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
And the last DIV in the page (even if it has a small content, but it is left only one in the last row) it's width has to be set to 960px anyway.
I was said to use flex for this purpose. But it solves only the sole DIV in the last row and content-depending width of the DIV. But, if you have many DIVs with different amount of contents in them you have different sizes of the DIVs, however rows will be filled by 100%.
EDIT
I have a table in the DIV with the content, so it could be useful to determine the length of the content (as we cannot predict the size of the content, as it can consist of images and text of different styles).
I am looking for CSS or jQuery.
Thank you!
You can use max-width and a dynamic unit as %. To limit the space any conent or element can use, depending on the parrent element.
In this case use :
.row-lister {
max-width: 49%;
}
This will limit each element to 49% of it parent .page_list_container.
I used 49% because you have margins between each element. I would recommend you to set does margins in % so they all add up to 100%.
Hope this helps :)
* {
box-sizing: border-box;
}
.page-list-img {
clear: both;
width: 100px;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
padding: 5px !important;
opacity: 1.0;
transition: opacity 500ms;
}
.page-list-img:hover {
opacity: 0.5;
transition: opacity 500ms;
}
.button-page-list-p {
text-align: left;
}
span.lister {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.page_list_container {
width: 960px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
}
.column2 table {
border: none;
width: 100%;
height: 130px;
}
.column2 table td {
border-style: none !important;
vertical-align: middle;
}
.column1 {
text-align: center;
line-height: 130px;
float: left;
width: 150px;
padding-left: 10px;
height: 130px;
}
.column2 {
border-left: solid 0.7px #ddd;
text-align: justify;
/*line-height: 130px;*/
float: initial;
/* width: 789px; */
padding-left: 10px;
height: 130px;
display: table;
}
.row-lister {
min-inline-size: 460px;
max-inline-size: 100%;
max-width: 49%;
/*float: left;*/
border-radius: 2px;
background-color: #f9f9f9;
border-top: solid 0.7px #ddd;
border-bottom: solid 0.7px #ddd;
border-left: solid 0.7px #ddd;
border-right: solid 0.7px #ddd;
/*width: 940px;*/
/* width:460px; */
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
flex-grow: 1;
}
<div class="page_list_container">
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here </em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here..... This is also a bit longer</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here longer a bit ...</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
how to draw a horizontal line touching from td 1 td 4 with out using content css
I am expecting as below progress bar
<table>
<hr>
<tr style="border-bottom:1px solid black;">
<td>
<div class="circle"><span id="progressindex">1</span></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>
Without using CSS you cannot do it.
Try this way but it uses CSS and also gives what you want.
HTML
<html>
<head>
<title>Step Progress bar</title>
</head>
<body>
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</body>
</html>
CSS
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style: none;
display: inline-block;
width: 30.33%;
position: relative;
text-align: center;
cursor: pointer;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height : 30px;
border: 1px solid #ddd;
border-radius: 100%;
display: block;
text-align: center;
margin: 0 auto 10px auto;
background-color: #fff;
}
.progressbar li:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index : -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}
i think when you click Run code snippet you'll see the last table .. i think is better
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style type="text/css">
.addouterline{
border-bottom:1px solid red;
color:red;
}
.roundnormal{border-radius: 70%;
text-align:center;
margin-bottom:30px;
line-height:20px;
width:40px;
height:30px;
border:1px solid black;
}
.roundthis{border-radius: 70%;
text-align:center;
margin-bottom:30px;
line-height:20px;
width:40px;
height:30px;
border:1px solid red;
color:red;
}
</style>
From 1 to 4 :
<table width="400px" cellpadding="0" cellspacing="0">
<!-- <hr>
<tr style="border-bottom:1px solid black;">-->
<tr align="center">
<td align="right"><span style="width:100px;" class="addouterline"> </span></td><td class="addouterline" width="200px"></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline"> </span></td>
</tr>
<tr align="center">
<td style="color:red">|</td><td></td><td></td><td style="color:red">|</td>
</tr>
<tr align="center">
<td>
<div class="circle"><!-- <span id="progressindex"> -->1<!-- </span> --></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>
<br>
<hr>
<br>
From 1 to 3 :
<table width="400px" cellpadding="0" cellspacing="0">
<!-- <hr>
<tr style="border-bottom:1px solid black;">-->
<tr align="center">
<td align="right"><span style="width:100px;" class="addouterline"> </span></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline"> </span></td><td width="200px"></td>
</tr>
<tr align="center">
<td>|</td><td></td><td>|</td><td></td>
</tr>
<tr align="center">
<td>
<div class="circle"><!-- <span id="progressindex"> -->1<!-- </span> --></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>
<br>
<hr>
<br>
From 2 to 4 :
<table width="400px" cellpadding="0" cellspacing="0">
<!-- <hr>
<tr style="border-bottom:1px solid black;">-->
<tr align="center">
<td width="200px"></td><td align="right"><span style="width:100px;" class="addouterline"> </span></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline"> </span></td>
</tr>
<tr align="center">
<td></td><td style="color:red">|</td><td></td><td style="color:red">|</td>
</tr>
<tr align="center">
<td>
<div class="circle"><!-- <span id="progressindex"> --><span class="roundnormal"> 1 </span><!-- </span> --></div>
</td>
<td>
<div class="circle"><span class="roundthis"> 2 </span></div>
</td>
<td>
<div class="circle"><span class="roundnormal"> 3 </span></div>
</td>
<td>
<div class="circle"><span class="roundthis"> 4 </span></div>
</td>
</tr>
</table>
</body>
</html>
I'm trying to imitate (in a simple way) the style of this page:
http://www.smoolis.com/screen/pricing/language/en
Essentially, I'm aiming to create three tables with product images on top, where the background color behind each of the three images changes slightly on hover in a fade effect.
I'm able to find quite a lot of examples of images changing, but few with the background color of a div - do you have an example of this working?
My WIP code is available here, though it has two issues:
1) I would like to add three different background-colors behind the 3 images
2) I would ideally not want the images to fade, but rather the background colors
3) I'd like the background colors to fade independently - e.g. now the images fade all at the same time
Any help would be super appreciated!
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.container {
position: relative;
width: 50%;
}
.container:hover .image {
opacity: 0.8;
}
</style>
<div id="columns">
<div class="one-third">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third-last">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
</div>
To address your three questions:
In their current form background colors cannot be added to these images as they already have a white background. If you would like to adjust the background color of these images you would need to remove the background in a photo editing program.
If you did use images with a transparent background then the following would allow you to fade the background of the images.
.container .image {
background-color:blue;
transition:background-color 1s;
}
.container .image:hover {
background-color:LightBlue;
}
<div class=container>
<img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>
<div class=container>
<img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>
A simple test of your example code shows that at least in my case, the images do fade separately.
Also, in my example of how you would do this with a transparent image, I put the hover property on the image rather than the container. If you would rather the fading function in the same way as your example, the line can be changed to .container:hover .image.
You need to set color:#xxxxxx independently. And your image background is in the front of "background" named container you need a .PNG, so the background will be visible.
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.container {
position: relative;
width: 50%;
}
.container:hover .image {
opacity: 0.7;
}
.container.color1:hover {
background-color:#51c2bc;
}
.container.color2:hover {
background-color:#35a9d2;
}
.container.color3:hover {
background-color:#007cab;
}
</style>
<div id="columns">
<div class="one-third">
<div class="container color1">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third">
<div class="container color2">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third-last">
<div class="container color3">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
</div>
I currently have a table setup that holds images in a table of varying sizes and is able to resize the image accordingly. How can I make the image maintain aspect ratio?
/* THIS PART IS FOR PAGE SETUP*/
.page-wrap {
min-height: 100%;
/* equal to footer height */
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
margin: 0;
margin-top: 100px;
}
.site-footer {
border-top: 2px dashed #95a0b7;
margin-left: auto;
margin-right: auto;
}
/* this is styling! */
.post {
color: #843900;
font-family: Calibri;
font-size: 112%;
border: 2px solid #;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 10;
}
html,
body {
background-color: #d1d6e0;
height: 100%;
}
/* THIS STUFF IS FOR DESIGN */
table {
width: 100%;
height: 100%;
}
td {
padding-left: 10px;
padding-bottom: 10px;
}
th {
text-align;
left;
}
.postTableBorder {
border-bottom: 1px dashed #95a0b7;
}
.footer {
text-align: center;
color: #843900;
font-family: Calibri;
font-size: 112%;
padding-bottom: 10px;
font-weight: bold;
}
h1 {
color: #843900;
font-family: Calibri;
font-size: 500%;
text-align: center;
margin: 0;
border-bottom: 5px dotted #95a0b7;
}
a {
text-decoration: none;
color: #843900;
text-shadow: 1px 1px 2px #662c00;
}
a:hover {
color: #662c00;
}
.headerP {
font-weight: bold;
color: #843900;
font-family: Calibri;
font-size: 150%;
}
.headerPselected {
font-weight: bold;
color: #843900;
font-family: Calibri;
font-size: 150%;
border-solid: solid 2px #7684a2;
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
box-shadow: -1px -1px 3px #0a0c0f, 1px 1px 3px #47566b;
line-height: 0;
}
.imageTD {
vertical-align: top;
padding-bottom: 10px;
}
h2 {
position: absolute;
bottom: 0px;
left: 10px;
width: 100%;
color: black;
font-family: Calibri;
}
/* COLORS FOR H2*/
.blue {
color: #0033cc;
text-shadow: 1px 1px 1px #002699;
}
.red {
color: #4d0000;
text-shadow: 1px 1px 1px #1a0000;
}
.imageLink:hover {
opacity: 0.66;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<title>Marc</title>
</head>
<body>
<div class="page-wrap">
<header>
<h1>
Homeless Helpers
</h1>
<table class="headerTable" , width="100%">
<tr>
<th width="20%">
<p class="headerP">
Message
</p>
</th>
<th width="20%">
<p class="headerP">
Goal
</p>
</th>
<th width="20%">
<p class="headerP">
Testimonials
</p>
</th>
<th width="20%">
<p class="headerP">
Media
</p>
</th>
<th width="20%">
<p class="headerP">
Donate
</p>
</th>
</tr>
</table>
</header>
<table>
<tr>
<td width="33%">
<div class="image">
<a href="code.html">
<div style='width:100%;height:100%'>
<img src='imgs/tweepy.png' style='width:100%;height:500px' alt='[]' class="imageLink" />
<h2 class="blue"> Care Packages</h2>
</div>
</a>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" />
</div>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" />
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' />
</div>
</div>
</td>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
<td width="50%" , class="imageTD" , rowspan="2">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:614px' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
</tr>
<tr>
<th colspan="2" , width="50%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x300' style='width:100%;height:300px' alt='[]' />
</div>
</div>
</th>
</tr>
</table>
</div>
<footer class="site-footer">
<p class="footer">
made by awesome people.
</p>
</footer>
</body>
</html>
How can I make it so that the images hold a ratio of 4:3 when the window is resized?
Change the <img> heights to auto works.
https://jsfiddle.net/JustusFT/3qtb1r9v/
However, I suggest you use a grid system such as bootstrap rather than using tables.
HTML:
<div class="page-wrap">
<header>
<h1>
Homeless Helpers
</h1>
<table class="headerTable" , width="100%">
<tr>
<th width="20%">
<p class="headerP">
Message
</p>
</th>
<th width="20%">
<p class="headerP">
Goal
</p>
</th>
<th width="20%">
<p class="headerP">
Testimonials
</p>
</th>
<th width="20%">
<p class="headerP">
Media
</p>
</th>
<th width="20%">
<p class="headerP">
Donate
</p>
</th>
</tr>
</table>
</header>
<table>
<tr>
<td width="33%">
<div class="image">
<a href="code.html">
<div style='width:100%;height:100%'>
<img src='imgs/tweepy.png' style='width:100%;height:auto' alt='[]' class="imageLink" />
<h2 class="blue"> Care Packages</h2>
</div>
</a>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' , align="top" />
</div>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' , align="top" />
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
</div>
</div>
</td>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
<td width="50%" , class="imageTD" , rowspan="2">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
</tr>
<tr>
<th colspan="2" , width="50%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x300' style='width:100%;height:auto' alt='[]' />
</div>
</div>
</th>
</tr>
</table>
</div>
<footer class="site-footer">
<p class="footer">
made by awesome people.
</p>
</footer>