I'm currently trying to code a website for the first time, and have run into the problem that when I'm trying to caption an image in a gallery and add a pop up info slide that it isn't centered under the image, but instead it is to the right of the image. The image should always have a caption, and when you scroll over the image a text box should go up, so that a description could be read. I'm not very sure how to fix the problem since I thought I had already centered the text. If anyone can help me I'll be very grateful.
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>
https://jsfiddle.net/b0gdpmjw/
image with caption
image with caption and pop up description
Position: Absolute; and flexbox structure, will do what you want.
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_positioning.asp
the solution is to specify the position from left for .text.
(tipp: i think it is a good idea to start with bootstrap. with bootstrap you can build up the basic framework of a website relatively easy, so that it also works on the smartphone. afterwards you can customize everything yourself as you like. to build up the basic framework of a website yourself and make it responsive for different devices is very difficult as a beginner. so you run from one big problem into the next. latest when you start with media-queries, you can hardly keep track of it all.)
figcaption {
color: white;
font-style: oblique;
position: relative;
text-align: center;
}
* {
box-sizing: border-box;
}
.column1 {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
p {
color: black; /* changed to black, so you can see the text */
font: 25px Sulphur Point, sans-serif;
}
.text {
position: absolute;
bottom: 0;
/* right: 0;*/
left: 0; /* here */
width: 200px;
height: 0;
text-align: center;
transition: height 0.7s ease-out;
}
.column1:hover>.text {
height: 150px;
}
.column1 {
float: left;
width: 33.33%;
padding: 5px;
margin-bottom: 50px;
}
/* Clearfix (clear floats) */
.row1::after {
content: "";
clear: both;
display: table;
margin-bottom: 50px;
}
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>
I have this gallery of images and I want on hover to zoom the image. I have shown below two images the first one is without hover effect and the second one is when image is hovered. This should be applied on every image. I also show you the code that I used to create the gallery.
HTML
<div class="tab-content">
<div class="tab-pane active" id="all">
<div class="row">
<div class="col-xl-6 col-lg-6 ">
<div class="first-img">
<img src="img/image_1.png" alt="">
<div class="text">
<h3>Mixed Gin Drinks</h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
<div class="second-img">
<img src="img/image_3.png" alt="">
<div class="text">
<h3>Gin Tonic</h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 second-col">
<div class="third-img">
<img src="img/image2.png" alt="">
<div class="text">
<h3>Gin on a Bar </h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
<div class="fourth-img">
<img src="img/image_4.png" alt="">
<div class="text">
<h3>Gin Tonic 2</h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
main .gallery .tab-content .tab-pane .first-img,.second-img,.third-img,.fourth-img{
position: relative;
margin-bottom: 15%;
}
main .gallery .tab-content .tab-pane .second-col{
margin-top:5%
}
main .gallery .tab-content .tab-pane .text{
position: absolute;
left: 50px;
bottom: -60px;
}
main .gallery .tab-content .tab-pane .text h3{
font-size: 40px;
line-height: 48px;
letter-spacing: 0px;
font-weight: bold;
margin-bottom: 0;
}
main .gallery .tab-content .tab-pane .text p{
font-size: 16px;
opacity: 0.5;
}
main .gallery .tab-content .tab-pane img{
width: 100%;
}
If you want to try that with CSS, you can try the "Transform" Property + scale.
choose your selector, in below "img" tag is taken, you can select yours:
img:hover {
transform: scale(2,2);
}
You can achieve this by selecting the "img" tag in the CSS as shown below,
img{
transition: 0.5s all ease-in-out; /*Animation for smooth transformation of images*/
}
Now, to add the zoom effect on hover
img:hover{
transform: scale(1.5); /*150% zoom*/
}
Assume I have a small component in a web application that represents an expander control, i.e. a header text, an icon to expand / collapse and some content.
A very simple React implementation (pseudo code) could look like this:
const Expander = ({children, title, onExpandToggle, isExpanded}) => (
<div>
<div><span>{title}</span><img src={...} onClick={onExpandToggle} /></div>
{isExpanded && children}
</div>
);
This implementation shows the icon after the title, so the position of the icon is determined by the length of the title.
It could look something like this:
Now assume that there are multiple like this below each other. It becomes messy:
To make this cleaner, all icons should have the same padding from left. The padding should not be fixed but dynamic, so that the longest title determines the position of all icons:
Assuming that I want to keep the expander in its own component, is there a CSS way to achieve my goal?
So far, I haven't tried anything as I don't have a starting point. In WPF I would have used something like SharedSizeGroup, but this doesn't exist for CSS.
Assuming you'll have a container to your component, you can set display: flex to the inner container and align-self: flex-end to your image.
Then wrap your component/s with a div that has display: inline-block which takes the width of the biggest element inside.
Here's an example:
.container{
display: inline-block;
padding: 3px;
}
.item{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item .plus{
width: 15px;
height: 15px;
background-image: url("https://cdn1.iconfinder.com/data/icons/mix-color-3/502/Untitled-43-512.png");
background-size: cover;
background-repeat: no-repeat;
align-self: flex-end;
margin-left: 10px;
}
<div class="container">
<div class="item">
<div>Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div>Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div>Term</div>
<div class="plus"></div>
</div>
</div>
Affecting all the instances without a shared container or fixed width and with CSS alone, is not possible, since there is no way to access a parent element with CSS. Therefore, If you'll have an inner instance (the biggest one) it won't be able to apply it's width to its own parent or any ancestor and it's other children.
If you're after a solution that will set all the instances in the page with the same size without them sharing a container you can achieve it with JS.
Calculate the width of each instance, save the biggest, then set this width for the rest of the instances. In this example I'm also highlighting the biggest item. The items are all around the page and can be inside various divs and displays or without any container.
var biggestWidth = 0;
var biggestItem;
function setWidth() {
$(".item").each(function() {
var currentWidth = $(this).width();
if (currentWidth > biggestWidth) {
biggestWidth = Math.ceil(currentWidth);
biggestItem = $(this);
}
});
$(".item").width(biggestWidth);
biggestItem.addClass("biggest");
}
$(setWidth());
section {
width: 40%;
float: left;
border: 1px solid black;
border-radius: 3px;
margin: 10px;
padding: 10px;
}
.s1 {
background-color: #e5e5e5;
display: table;
}
.item {
display: inline-block;
clear: both;
float: left;
}
.txt {
float: left;
display: inline-block;
}
.plus {
width: 15px;
height: 15px;
background-image: url("https://cdn1.iconfinder.com/data/icons/mix-color-3/502/Untitled-43-512.png");
background-size: cover;
margin-left: 10px;
float: right;
}
.shift{
margin-left: 30%;
}
.clear{
clear: both;
}
.biggest{
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="s1">
<div class="item">
<div class="txt">Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Term</div>
<div class="plus"></div>
</div>
</section>
<section>
<div class="item">
<div class="txt">Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Term</div>
<div class="plus"></div>
</div>
</section>
<section>
<div class="item">
<div class="txt">Synonyms - Long</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Term</div>
<div class="plus"></div>
</div>
</section>
<div class="item">
<div class="txt">Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Term</div>
<div class="plus"></div>
</div>
<div class="clear"></div>
<div class="shift">
<div class="item">
<div class="txt">Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">The bigget item is here</div>
<div class="plus"></div>
</div>
</div>
You can also try using the css display property "table-row" and "table-cell".
style:
.trow {
display: table-row;
}
.tcell
{
display: table-cell;
padding: 2px;
}
You can design your component like following.
const Expander = ({children, title, onExpandToggle, isExpanded}) => (
<div className="trow">
<div className="tcell">{title}</div>
<div className="tcell"><img src={...} onClick={onExpandToggle} /></div>
{isExpanded && children}
</div>
);
Example
.trow {
display: table-row;
}
.tcell
{
display: table-cell;
padding: 2px;
}
<div>
<div class="trow">
<div class="tcell">Synonyms</div>
<div class="tcell">X</div>
</div>
<div class="trow">
<div class="tcell">Concept</div>
<div class="tcell">X</div>
</div>
<div class="trow">
<div class="tcell">Term</div>
<div class="tcell">X</div>
</div>
</div>
I think that strictly speaking, with all the restrictions you've laid out, the answer is "no, it's not possible".
But since I believe that you need, at any rate, to group those expanders somehow (alternative being that every expander on the page would be horizontally aligned, to which no complete CSS solution exists either), you can simply count on the CSS box model.
<div style="background-color: #efffef; display: inline-block;">
<div style="position: relative; padding-right: 36px;">
<span>Title 1</span>
<span style="position: absolute; right: 0; top: 0;">[x]</span>
</div>
<div style="position: relative; padding-right: 36px;">
<span>Long title 2</span>
<span style="position: absolute; right: 0; top: 0;">[x]</span>
</div>
<div style="position: relative; padding-right: 36px;">
<span>Title 3, at your service</span>
<span style="position: absolute; right: 0; top: 0;">[x]</span>
</div>
</div>
I personally would do it with classic <table>. Its easy, semantically correct, and it will be done in 3 minutes. But we could do it also with display:inline-block and float:right, or with <table>-imitation using display:table, display:table-row and display:table-cell. In my opinion display: flex is relative new and not overall cross-browser compatible (for example IE10, IE11 and others). Because of all it I would like to provide you 3 solutions.
Solution with display:inline-block and float:right
With display:inline-block the size is always aligned on the content.
.container,
.item div,
.item b{display:inline-block}
.item b
{
float:right;
width:16px;
height:16px;
margin-left:5px;
cursor:pointer;
background:url("https://i.stack.imgur.com/bKWrw.png")
}
<div class="container">
<div class="item">
<div>Synonyms</div>
<b></b>
</div>
<div class="item">
<div>Concept</div>
<b></b>
</div>
<div class="item">
<div>Term</div>
<b></b>
</div>
</div>
<br style="clear:both">
Solution with <table>-imitation
.container{display:table}
.item{display:table-row}
.item div{display:table-cell; vertical-align:top}
.item b
{
display:inline-block;
width:16px;
height:16px;
cursor:pointer;
margin-left:5px;
background:url("https://i.stack.imgur.com/bKWrw.png")
}
<div class="container">
<div class="item">
<div>Synonyms</div>
<div><b></b></div>
</div>
<div class="item">
<div>Concept</div>
<div><b></b></div>
</div>
<div class="item">
<div>Term</div>
<div><b></b></div>
</div>
</div>
Solution with classic <table> (my favorite)
.menu td{vertical-align:top}
.menu td b
{
display:inline-block;
width:16px;
height:16px;
cursor:pointer;
margin-left:5px;
background:url("https://i.stack.imgur.com/bKWrw.png")
}
<table class="menu" cellpadding="0" cellspacing="0">
<tr>
<td>Synonyms</td>
<td><b></b></td>
</tr>
<tr>
<td>Concept</td>
<td><b></b></td>
</tr>
<tr>
<td>Term</td>
<td><b></b></td>
</tr>
</table>
The simplest example I can think of, based on your code snippet, would be something like:
const containerStyle = {
width: `[whatever width you need for the container]`,
display: `flex`,
flexDirection: `column`
}
const itemStyle = {
width: `100%`,
display: `flex`,
flexDirection: `row`,
justifyContent: `space-between`
}
const Expander = ({children, title, onExpandToggle, isExpanded}) => (
<div style={containerStyle}>
<div style={itemStyle}>
<span>{title}</span>
<img src={...} onClick={onExpandToggle} />
</div>
{isExpanded && children}
</div>
);
const Expander = (children, title, onExpandToggle, isExpanded) => (
<div>
{title}
<img src={...} style={{marginLeft : '5px',float : 'right'}} onClick={onExpandToggle}/>
</div>
<div style={{width : '0px',overflowX : 'visible'}}>
{isExpanded && <div>
{children}
</div>}
</div>
);
And put it in:
<div style={{display : 'inline-block'}}>
<Expander />
<Expander />
</div>
In CSS it is not possible for different elements of a page to "know" each other. The closest thing you can get is to use display flex and/or grid. This way the direct parent can control the way its children will display, kind of similar to React.
The main difference between flex and grid is that flex is 1 axis and grid 2 axis.
Working example using grid and flex:
<div class="container">
<div class="summary"><span class="text">Synonyms</span> <span class="icon">+</span></div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officiis sequi perspiciatis sapiente iure minus laudantium! Quidem iure consectetur quod odit iusto, labore sunt quae, enim nesciunt officiis, quia ad.</p>
</div>
<div class="summary"><span class="text">Concept</span> <span class="icon">+</span></div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officiis sequi perspiciatis sapiente iure minus laudantium! Quidem iure consectetur quod odit iusto, labore sunt quae, enim nesciunt officiis, quia ad.</p>
</div>
<div class="summary"><span class="text">Terms</span> <span class="icon">+</span></div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officiis sequi perspiciatis sapiente iure minus laudantium! Quidem iure consectetur quod odit iusto, labore sunt quae, enim nesciunt officiis, quia ad.</p>
</div>
</div>
<style>
.container {
display: grid;
/* summary's width needs to be relative to the longest text
and details needs to span the whole grid */
grid-template-columns: auto auto;
}
.summary {
grid-column: 1 / 2; /* start at the beginning of 1st column and end at the beginning of the 2nd column */
display: flex; /* create horizontal layout */
justify-content: space-between; /* place the available space between the children */
}
.details {
grid-column: 1 / 3; /* start at the beginning of 1st column and end at the end of the 2nd column */
}
</style>
As you can see, it is very readable and requires very little markup.
With flex and grid you need to think on 2 levels parent > child. This means you need to change your React component accordingly:
const Expander = ({children, title, onExpandToggle, isExpanded}) => (
<>
<div class="summary" onClick={onExpandToggle}><span class="title">{title}</span> <span class="icon">+</span></div>
{isExpanded && (
<div class="details">
{children}
</div>
)}
</>
);
Here I removed the wrapper div in order to use a Fragment to ensure .summary and .details are direct children of a .container. Note that I also moved the onClick on the whole title for UX reasons.
CSS Grid is very useful and flexible, it is worth learning it. The browser support is recent but quite good, just make sure you use autoprefixer.
You can also use tricks using display: inline-block; whose size is based on its children but will involve workarounds when one of the children needs to overflow (like in your case). So I don't recommend it. I would also advise against using Javascript.
Don't hesitate to tell me what you think about this answer.
It is possible.
1. Flex-box + Absolution:
if you don't mind to use absolute positioned container, you can do it in this way
.container {
display: inline-flex;
flex-direction: column;
align-items: stretch;
width: auto;
}
.item {
margin: 5px 0;
padding: 5px;
border: 1px solid black;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header img {
width: 8px;
height: 8px;
margin-left: 20px;
cursor: pointer;
}
<div class="container">
<div class="item">
<div class="header">
<span>Synonyms</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
<div class="item">
<div class="header">
<span>Concept</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
<div class="item">
<div class="header">
<span>Term</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
</div>
The main problem here is that you don't know the height of the container so it might influence other content.
2. Inline Flex-box:
if the container position is critical for you, you can use inline-flex
.wrapper {
margin: 20px 10px;
}
.container {
display: inline-flex;
flex-direction: column;
align-items: stretch;
width: auto;
}
.item {
margin: 5px 0;
padding: 5px;
border: 1px solid black;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header img {
width: 8px;
height: 8px;
margin-left: 20px;
cursor: pointer;
}
Some content above the container...
<div class="wrapper">
<div class="container">
<div class="item">
<div class="header">
<span>Synonyms</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
<div class="item">
<div class="header">
<span>Concept</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
<div class="item">
<div class="header">
<span>Term</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
</div>
</div>
Some content below the container...
I made a quick hub for two websites I created and I wanted to have two divs centered side by side, so that when you put your mouse over each div, it changes the body background image. I have made it so that when you hover over it, it changes the background but, its not smooth.
I really want to learn java script and I feel like this a good experience for me, thanks for any help
I'm using jQuery and Bootstrap.
Is there a way to just use css? if there isn't a way then its fine.
HTML:
<body>
<div class="container">
<div class="row vertical-center">
<div class="col-md-6">
<div class="fre">
<h3>Howdy</h3>
<a href="http://www.google.com">
<div class="fre-moveleft smooth" id="fre">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="med">
<h3>Partner</h3>
<a href="http://www.google.com">
<div class="med-moveright smooth" id="med">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.vertical-center {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
.scale {
width: 60%;
position: relative;
}
.smooth {
transition: 0.3s ease;
cursor: pointer;
}
.med {
float: left;
}
.med-moveright:hover {
transform: translate(50px);
}
.fre {
float: right;
text-align: right;
}
.fre-moveleft:hover {
transform: translate(-50px);
}
/*
body {
background-image: url(../images/kabobi.jpg);
}
*/
/*
body .fre-moveleft:hover {
background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/
JS:
$("#med").hover(function() {
$('body').css("background", "url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
});
$("#fre").hover(function() {
$('body').css("background", "url(https://www.purinamills.com/2.purinamills.com/media/Images/MasterBrand/Lifestages/horse_lifestage_any-life-stage.png?ext=.png");
});
JSFiddle
Here's a way you can fade between the two by toggling a class and setting a data attribute in jQuery, the rest controlled in CSS.
var $body = $('body');
function setBg(str) {
var bg = $body.attr('data-bg');
$body.addClass('out');
var t = setTimeout(function() {
$body.attr('data-bg', str).removeClass('out');
},250);
}
function hideBg() {
$body.addClass('out');
}
$("#med img").hover(function() {
setBg('med');
},function() {
hideBg();
});
$("#fre img").hover(function() {
setBg('fre');
},function() {
hideBg();
});
.vertical-center {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
.scale {
width: 60%;
position: relative;
}
.smooth {
transition: 0.3s ease;
cursor: pointer;
}
.med {
float: left;
}
.med-moveright:hover {
transform: translate(50px);
}
.fre {
float: right;
text-align: right;
}
.fre-moveleft:hover {
transform: translate(-50px);
}
/* new stuff */
body::before,
body::after {
transition: opacity .25s;
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.out::after,
.out::before {
opacity: 0;
}
[data-bg="med"]::before {
background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
}
[data-bg="fre"]::after {
background-image: url("https://www.purinamills.com/2.purinamills.com/media/Images/MasterBrand/Lifestages/horse_lifestage_any-life-stage.png?ext=.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row vertical-center">
<div class="col-md-6">
<div class="fre">
<h3>Howdy</h3>
<a href="http://www.google.com">
<div class="fre-moveleft smooth" id="fre">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="med">
<h3>Partner</h3>
<a href="http://www.google.com">
<div class="med-moveright smooth" id="med">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
</div>
</div>
</body>
Sure, you can add a transition to the body like this:
body {
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
https://jsfiddle.net/zdwksre7/
This css will transition between the background in the body
Also, you can start experimenting adding classes with javascript with timeouts, so you can add more custom effects. Like fade, opacity, animate, etc. (Like, on hover, add the class 'fade' to the body (this class can have opacity: 0, and add to the body instead of a background-image, a opacity transition, wait 250ms, and then remove the class fade and change the background. This will make a smooth opacity transition between backgrounds)
You can see an example here
https://jsfiddle.net/866wwr0f/
I've been trying to create the below layout to no avail. Would someone be kind enough to help me out in either creating a minimal working example or linking to somewhere that would be able to help me out with this?
What I need is a grid where the row heights are the same. With each row containing 2 images and 1 text column (the text column being placed in different locations in each row). The text column needs to be the same height as the images and I'd like the text to be vertically centered but the width of it needs to smaller (half the size). With the images, I'd like to have a white overlay on hover or touch(mobile) with a header and a couple lines for links and one link that will have a video popup (a la fancybox).
I'd like for this to be responsive and adapt to screen sizes. On mobile I'm fine with each box being 100% width but it's the tablet sizes I think I'm having issues with laying this thing out properly. The hover state would obviously need to become a touch state on these platforms.
I'd supply my code if need be but I think I'd like to just start from scratch since I feel like I've just created a huge mess.
I feel like this is something that should be so simple yet I'm having way too many problems with this and I can't seem to find any websites that showcase examples of what I'm trying to create....similar ideas have been found but not exactly what I'm looking for.
Details:
1140px as the max width of the container
444px as the max width of the images
222px as the max width of the text boxes
5px margin/padding
Any help in the right direction would be grateful.
http://jsfiddle.net/sa7v57bf/
<div class="container">
<ul>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
<ul>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
*{box-sizing:border-box}.container{max-width:1140px;margin:0 auto;padding:0 10px}ul,ul li{padding:0}ul{list-style:none;margin:1% 0;font-size:0}ul li{display:inline-block;width:100%;margin:0 0 1%;height:100%;position:relative}ul li img{width:100%;display:block}ul li.text{background-color:#000;color:#FFF;padding:20px 10px;font-size:1.5rem;width:100%;vertical-align:top;text-align:center}#media (min-width:550px){ul li{width:50%}ul li.text div{margin:2%}}#media (min-width:1000px){ul li{width:39.5%;margin:0 .5%}ul li:first-child{margin-left:0}ul li:last-child{margin-right:0}ul li.text{width:19%;min-height:305px}}#media (min-width:1140px){ul li.text{min-height:341px}ul li.text div{margin:40% 0}}.info{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}.info:hover{opacity:1}
A combination of things here.
Flexbox for the equal heights, max-width where required, paddings/margin for spacing....oh, and positioning for the overlays.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
max-width: 1140px;
margin: auto;
margin-top: 5px;
border: 1px solid grey;
display: flex;
padding: 5px;
}
.wrapper > *:nth-child(2) {
margin: 0 5px;
}
.text,
header,
imgwrap {
flex: 1;
}
.text {
width: 20%;
padding: 1em;
max-width: 222px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
header {
background: #bada55;
position: relative;
}
.imgwrap .overlay,
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(155, 0, 65, .25);
padding: 1em;
font-weight: bold;
color: #fff;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0.25s ease;
}
.imgwrap:hover .overlay,
header:hover .overlay {
opacity: 1;
visibility: visible;
}
.imgwrap {
width: 40%;
position: relative;
}
.imgwrap img {
width: 100%;
display: block;
max-width: 444px;
}
<div class="wrapper">
<div class="text">Lorem ipsum dolor.</div>
<header>
<div class="overlay">Overlay Text</div>
</header>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
<div class="wrapper">
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
Media queries can manage the rest.
Codepen Demo.