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/
Related
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*/
}
I am using the minimal template in Shopify and would like to recreate this image attached. I have tried researching for similar examples but can't seem to find anything. How do I go about creating this image? How do I get an image behind a menu?
Any links or documents to achieving image would really help.
Try to break down the design to work out it's constituent parts. You want a background image and an overlay with product cards. You want to position the overlay on top of the picture you do this by applying position:relative to the parent and position:absolute to the child so it will be positioned within it's parent. Then apply transform: translate() to translate the overlay dependant on it's size to achieve the offset on the right hand side.
Here's a pen : https://codepen.io/NeilWkz/pen/qgRMyW
<div class="img-hero-with-menu-overlay">
<div class="left-img">
</div>
<div class="overlay">
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 1</h3>
<p>lorem</p>
</div>
</div>
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 2</h3>
<p>lorem</p>
</div>
</div>
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
</div>
</div>
</div>
The CSS
img-hero-with-menu-overlay {
position: relative;
background-color: #bcbdc0;
width: 100%;
display: block;
}
.left-img {
height: 100vh;
display: block;
width: 75%;
background: url("https://www.llialighting.com/Content/files/ProductImages/v_06f3_angled448253599.png")
no-repeat center center;
background-size: cover;
}
.overlay {
position: absolute;
right: 0;
top: 50%;
transform: translate(-12.5%, -50%);
width: 40%;
}
.product-card {
display: flex;
margin-bottom: 1.5rem;
}
.info {
padding: 1.5rem;
}
I have two buttons here, and when I hover one of the button, it'll show a div with information(left to right). If the cursor is not on the buttons nor the div, it'll hide.
Here is my code, it works for me , but I want to know better solutions than mine. :D Thank you!
HTML:
<button id="Btn_Nav_Equipment" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)" ><span></span></button>
<button id="Btn_Nav_Report" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)"><span></span></button>
<div id='Panel_Equipment' style="display:none;" onmouseover="Set_Panel_Nav()"onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>
<div id='Panel_Report' style="display:none;" onmouseover="Set_Panel_Nav()" onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>
Javascript:
var Btn_Nav=false;
var Panel_Nav=false;
function Nav_Over(id){
var str=id.split('_');
var Panel_id='Panel_'+str[2];
$('#'+Panel_id).animate({width:'show'},300);
}
function Nav_Out(id){
var str=id.split('_');
var Panel_id='Panel_'+str[2];
if(( Btn_Nav==false)&&(Panel_Nav==false)){
$('#'+Panel_id).animate({width:'hide'},300);
}
}
function Nav_Panel_Out(id){
$('#'+id).animate({width:'hide'},300);
}
function Set_Btn_Nav(){
Btn_Nav=true;
}
function Set_Panel_Nav(){
Panel_Nav=true;
}
function Leave_Btn_Nav(){
Btn_Nav=false;
}
function Leave_Panel_Nav(){
Panel_Nav=false;
}
I would prefer doing such things by using HTML and CSS3 only.
button {
width: 40px;
height: 40px;
position: relative;
}
button > div.panel {
position: absolute;
z-index: 1;
top: 20px;
left: 40px;
transition: all .3s;
visibility: hidden;
opacity: 0;
width: 200px;
height: 80px;
background: white;
border: 2px solid;
}
button:hover > div.panel {
visibility: visible;
opacity: 1;
}
<button>
B1
<div class="panel" id="Panel_Equipment">Panel_Equipment</div>
</button>
<button>
B2
<div class="panel" id="Panel_Report">Panel_Report</div>
</button>
Trying to answer the question without being able to run your code so it would work, so I'm answering the text itself - the approach I'd take on this would be without javascript. It's rather simple, take a look!
.info-button {
padding: 5px 10px;
background: #afa;
display: inline-block;
position: relative;
}
.info-box {
display:none;
}
.info-button:hover .info-box {
display: block;
position: absolute;
top: 100%;
left: 0;
width: 300px;
padding: 0 20px 10px;
background: #faa;
}
<div class="info-button">
<button>Hover me</button>
<div class="info-box">
<h1>More info</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="info-button">
<button>Hover me</button>
<div class="info-box">
<h1>More info</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
$('.btn').hover(function(){
$('#'+$(this).data('open')).animate({width:'200px'},300);
},function() {
$('#'+$(this).data('open')).animate({width:'0px'},300);
});
div {
width:0;
overflow:hidden;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-open="Panel_Equipment" ><span>asdada</span></button>
<button class="btn" data-open="Panel_Report"><span>sdasda</span></button>
<div id='Panel_Equipment'>text 1</div>
<div id='Panel_Report'> text 2</div>
Try with hover() function of jquery.And remove the inline mouseover
$('button').hover(function(){
$('#'+$(this).attr('data-target')).animate({width:'show'},300);
},function(){
$('.panel').animate({width:'hide'},300);
})
.panel{
width:100px;
height:50px;
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Btn_Nav_Equipment" data-target="Panel_Equipment">one<span></span></button>
<button id="Btn_Nav_Report" data-target="Panel_Report">two<span></span></button>
<div id='Panel_Equipment' class="panel" style="display:none;">Panel_Equipment</div>
<div id='Panel_Report' class="panel" style="display:none;">Panel_Report</div>
Here's a simple CSS3 solution, toggling a class on hover with jQuery :
let $info = $(".info")
$("button").hover( () => {
$info.addClass("onscreen")
}, () => {
$info.removeClass("onscreen")
})
button {
margin: 20px;
}
div.info {
position: absolute;
top: 50px;
width: 200px;
height: 200px;
background: #90ee90;
display: flex;
justify-content: center;
align-items: center;
transform : translateX(-100%);
opacity : 0;
transition: all 0.3s ease-in-out;
}
div.info.onscreen {
transform: translateX(0);
opacity : 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hover me</button>
<div class="info">
<span>Div content</span>
</div>
Try using the below solution.
$(document).on("mouseover",".btn,.panel",function(){
if($(this).hasClass("panel")){
$(this).removeClass("collapsed");
}
else{
var panel = $(this).attr("data-panel");
$("."+panel).removeClass("collapsed");
}
});
$(document).on("mouseout",".btn,.panel",function(){
$(".panel").addClass("collapsed");
});
.collapsed{
display:none;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<button class="btn_Equipment btn" data-panel="Panel_Equipment"><span>Equipment</span></button>
<button class="btn_Report btn" data-panel="Panel_Report"><span>Report</span></button>
<div class='Panel_Equipment collapsed panel'>Equipment Div </div>
<div class='Panel_Report collapsed panel'>Report Div</div>
Basically,
I have a gradient bar and on hover of the USP's below the bar the gradient moves to above that USP with a triangle. Now I'm trying to figure out how I can get the center of an SVG to center inside of the USP on hover to make the gradient look like it has a triangle also. It's a little hard screenshot and codepen below.
http://codepen.io/nsmed/pen/MpOLpp?editors=1100
<section class="small-business-split-header-block">
<div class="wrapper">
<h1 class="small-business-header">Your calls<br />answered brilliantly</h1>
<p class="small-business-sub-header">Our small business services ensure you capture every opportunity and make your business look bigger. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet semper ante. Ut vel odio.</p>
</div><!--wrapper-->
<div class="usp-bar">
<p class="usp-one active">Telephone Answering</p>
<span><img src="http://svgshare.com/i/y4.svg" /></span>
</div><!--usp-bar-->
</section>
<div class="usp-list cf">
<div class="usp active">
<a href="#">
<p>Need your own<br /><strong>dedicated PA?</strong></p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Looking for<br />an auto attendent?</p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Missing calls<br />on your mobile?</p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Looking for a<br />business number?</p>
</a>
</div><!--usp-->
</div><!--usp-list-->
Here try this, click on items to see the beak moving. It's not a production ready code, but you can take it from here :)
Markup
<div class="bar">
<div class="bar-background">
<div class="bar-slider"></div>
</div>
</div>
<ul class="menu">
<li class="menu-items">Item 1</li>
<li class="menu-items">Item 2</li>
<li class="menu-items">Item 3</li>
<li class="menu-items">Item 4</li>
</ul>
SCSS
$bar-height: 6rem;
$bar-slider-height: 2rem;
$bar-slider-background: #ffffff;
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
padding: 0;
margin: 0;
}
.bar {
position: relative;
}
.bar-background {
background: -webkit-linear-gradient(
left,
rgba(0, 175, 169, 1) 30%,
rgba(1, 180, 172, 0.15) 60%);
height: $bar-height;
overflow: hidden;
width: 100%;
}
.bar-slider {
height: $bar-slider-height;
margin-top: $bar-height - $bar-slider-height;
display: flex;
width: 200vw;
transition: transform 1s linear;
&:before,
&:after {
content: "";
width: 100vw;
display: block;
background: $bar-slider-background;
height: $bar-slider-height;
}
&:before {
transform: skew(45deg) translateX(-50%);
}
&:after {
transform: skew(-45deg) translateX(-50%);
}
}
.menu {
height: 2rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu-items {
list-style: none;
}
JS
var slider = $('.bar-slider'),
sliderCenter = parseInt(slider.width() / 4, 10); // taking 1/4 here because our slider is twice the width of viewPort
$('.menu-items').on('click', function() {
var activeClassName = 'is-active';
$(this)
.addClass(activeClassName)
.siblings()
.removeClass(activeClassName);
var activeItem = $('.' + activeClassName),
activeItemPositonFromLeft = activeItem.position().left,
activeItemCenter = parseInt(activeItem.width() / 2, 10),
newPos = parseInt(activeItemPositonFromLeft - sliderCenter + activeItemCenter, 10),
translateX = 'translateX(' + newPos + 'px)';
slider.css({
transform: translateX
});
});
http://codepen.io/robiosahan/pen/gmopRJ
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.