Image layout with the power of flex

Developer
Christopher Schuck
Size
3,510 Kb
Views
40,480
  1. Image layout with the power of flex Previews
  2. Image layout with the power of flex HTML Codes
  3. Image layout with the power of flex CSS Codes
  4. Image layout with the power of flex JS Codes

How do I make an image layout with the power of flex?

One large, vertical image to take up nearly 100vh of the height, and 3 smaller, wider images to occupy the same space. Hover over them to expand. Click the checkbox to change the background attachment. Most people prefer it to be off. There might be some performance issues when transitioning flex-basis.. What is a image layout with the power of flex? How do you make a image layout with the power of flex? This script and codes were developed by Christopher Schuck on 22 July 2022, Friday.

Image layout with the power of flex Previews
IQ Test

Image layout with the power of flex - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image layout with the power of flex</title> <link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="fixed-bar">
<label>Turn off fixed background attachment<input type="checkbox" id="turn-off" /></label>
</div>
<div class="body-wrapper">
<div class="first background-div" id="large-image-one"> <h2 class="caption-header">Home Decor</h2>
</div>
<section class="wrapper"> <div class="background-wrapper background-div" id="first"> <h2 class="caption-header">gift ideas</h2></div> <div class="background-wrapper background-div" id="second"><h2 class="caption-header">categories</h2></div> <div class="background-wrapper background-div" id="third"><h2 class="caption-header">collections</h2></div>
</section>
</div>
<div class="body-wrapper">
<div class="first background-div" id="large-image-two"> <h2 class="caption-header">popular & trending</h2>
</div>
<section class="wrapper" style="order: -1; padding-left: 0; padding-right: 20px"> <div class="background-wrapper background-div" id="fourth"><h2 class="caption-header">new</h2></div> <div class="background-wrapper background-div" id="fifth"><h2 class="caption-header">mugs</h2></div> <div class="background-wrapper background-div" id="sixth"><h2 class="caption-header">jewelry</h2></div>
</section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Image layout with the power of flex - Script Codes CSS Codes

/*autoprefixer and reset used*/
/*Look best on a tall monitor with full page*/
body { padding: 20px 20px 0 20px; /*this height is just to demonstrate what it looks to scroll past the bottom images*/ height: 4000px; font: 100% 'Yanone Kaffeesatz', sans-serif;
}
.fixed-bar { position: fixed; top: 0; left: 20px; background: #fff; z-index: 10
}
input, label { color: red
}
.body-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 20px; max-width: 1280px; margin: 0 auto
}
.first, .wrapper { height: 100vh; /*Change as needed. This prevents the smaller images from getting scrunched up*/ min-height: 600px; -ms-flex-preferred-size: 50%; flex-basis: 50%; cursor: pointer; -webkit-transition: -webkit-flex-basis 0.4s ease-in-out 0.2s; transition: -webkit-flex-basis 0.4s ease-in-out 0.2s; transition: flex-basis 0.4s ease-in-out 0.2s; transition: flex-basis 0.4s ease-in-out 0.2s, -webkit-flex-basis 0.4s ease-in-out 0.2s, -ms-flex-preferred-size 0.4s ease-in-out 0.2s; text-align: center; overflow: hidden
}
.caption-header { font-weight: 100; background: rgba(25,25,25,0.8); color: #fff; padding: 10px 0; font-size: 1.5em; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.3s ease-in-out 0.4s; transition: -webkit-transform 0.3s ease-in-out 0.4s; transition: transform 0.3s ease-in-out 0.4s; transition: transform 0.3s ease-in-out 0.4s, -webkit-transform 0.3s ease-in-out 0.4s
}
.first:hover, .wrapper:hover { -ms-flex-preferred-size: 100%; flex-basis: 100%
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 20px
}
.background-wrapper { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; margin-bottom: 20px; width: 100%; -webkit-transition: -webkit-flex-basis 0.4s ease-in-out 0.2s; transition: -webkit-flex-basis 0.4s ease-in-out 0.2s; transition: flex-basis 0.4s ease-in-out 0.2s; transition: flex-basis 0.4s ease-in-out 0.2s, -webkit-flex-basis 0.4s ease-in-out 0.2s, -ms-flex-preferred-size 0.4s ease-in-out 0.2s; cursor: pointer; overflow: hidden
}
.background-attach { background-attachment: scroll !important; background-position: center center !important; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.wrapper > div:last-child { margin-bottom: 0
}
.background-wrapper:hover { -ms-flex-preferred-size: 100%; flex-basis: 100%
}
.first:hover > .caption-header, .background-wrapper:hover > .caption-header { -webkit-transform: translateY(0); transform: translateY(0)
}
#large-image-one { background: url("https://farm1.staticflickr.com/727/21673476679_3f001b18fe_h.jpg") fixed 0% 50% no-repeat
}
#first { background: url("https://farm1.staticflickr.com/577/21675925938_e6f2cd0b97_h.jpg") fixed 20% 120% no-repeat
}
#second { background: url("https://farm6.staticflickr.com/5670/21852371935_04848f1034_h.jpg") fixed center top no-repeat
}
#third { background: url("https://farm6.staticflickr.com/5716/21861757341_08bd25c0cf_h.jpg") fixed 100% 50% no-repeat
}
#large-image-two { background: url("https://farm6.staticflickr.com/5826/21853275615_c96fd8849c_h.jpg") fixed 180% 20% no-repeat
}
#fourth { background: url("https://farm6.staticflickr.com/5793/21874899471_311e162554_h.jpg") fixed 180% 50% no-repeat
}
#fifth { background: url("https://farm6.staticflickr.com/5627/21835359466_d0ae74e58f_h.jpg") fixed 180% 50% no-repeat
}
#sixth { background: url("https://farm6.staticflickr.com/5652/21836113496_c56c3baaf8_h.jpg") fixed 180% 10% no-repeat
}

Image layout with the power of flex - Script Codes JS Codes

/*$('#first').mousemove(function (e) { var $this = $(this); var $content = $this.find('.content'); $this.css('background-position', -($this.outerHeight() -$this.outerHeight()) * ((e.clientY - $this.offset().top) / $this.outerHeight())) console.log($this.css('background-position'), e.target);
});*/
$("#turn-off").on("change", function(){ if ($(this).prop( "checked" )) { $(".background-div").addClass("background-attach") } else { $(".background-div").removeClass("background-attach") }
})
Image layout with the power of flex - Script Codes
Image layout with the power of flex - Script Codes
Home Page Home
Developer Christopher Schuck
Username mofny
Uploaded July 22, 2022
Rating 4
Size 3,510 Kb
Views 40,480
Do you need developer help for Image layout with the power of flex?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christopher Schuck (mofny) Script Codes
Name
Flex Image Slider 2.0
Boilerplate for your first site
Demo site for Udacity
A very simple tooltip with options
An interesting topic
Helpful Web Dev Links
Week 2 Outline
A Pen by Christopher Schuck
Smooth transition of CSS order property
An intro for my students
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!