I'd like to have a header and then three images side-by-side.
When in small screens, the images should occupy all the width and be placed vertically one after another.
For each image, when the mouse is over it, some text should be overlayed.
For mobile and touch screens, I don't know how that text could be shown, but would like to have it shown in some way.
Each of the images should point to another html page (not shown in my example.
What I managed to do until now is:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-family: helvetica, arial, sans-serif;
}
.cabecalho {
width:70%;
height:200px;
text-align:center;
margin:70px;
margin-top:10px;
}
.cabecalho p{
line-height: 10px; /* within paragraph */
margin-bottom: 4px; /* between paragraphs */
}
.corpo {
width:60%;
height:500px;
}
* {
box-sizing: border-box;
}
.img__description_layer {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(204, 204, 204, 0.6);
color: #111;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
pad: 8px;
height: 300px;
width: 200px;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__description {
transition: .2s;
transform: translateY(1em);
}
.img__wrap:hover .img__description {
transform: translateY(0);
}
.img__wrap:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
</style>
</style>
</head>
<body>
<div class="cabecalho">
<header>
</header>
</div>
<main>
<div class="row">
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width:100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
I'd appreciate some help on this.
Related
I made an example on CodePen - CodePen
I want the image to disappear on hover with the mouse and a block with text appears.
My problem is that I don't understand how to remove the jumps if I want to keep the text.
Now there are unpleasant jumps in my layout, which is caused by display: none;.
And I think to add smooth transitions. For reuse, I moved the code to Alpine.data. Is this a good idea?
I've used alpine before with tilewind and it's easier. But in this bootstrap project, there are complications.
Please tell me what are your ideas?
Thanks in advance!
<div class="container advantage-pic">
<div class="pic1" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic1.png" alt="">
<div class="txt" x-cloak x-show="open" >Some text</div>
</div>
<div class="pic2" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic2.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
<div class="pic3" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic3.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
<div class="pic4" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic4.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
</div>
[x-cloak] {
display: none !important;
}
.advantage-pic {
max-width: 760px;
margin: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 12px;
grid-row-gap: 12px;
}
.pic1 {
grid-area: 1 / 1 / 3 / 2;
text-align: center;
position: relative;
}
.pic2 {
grid-area: 1 / 2 / 2 / 3;
text-align: center;
position: relative;
}
.pic3 {
grid-area: 2 / 2 / 3 / 3;
text-align: center;
position: relative;
}
.pic4 {
grid-area: 3 / 1 / 4 / 3;
text-align: center;
position: relative;
}
.txt {
color: blue;
background: #fe980f;
position: absolute;
top: 0;
left: 0;
transition: height 500ms ease 0s;
width: 100%;
display: block;
height: 100%;
}
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
import Alpine from "https://cdn.skypack.dev/alpinejs#3.10.5";
Alpine.data("onHover", () => ({
open: false,
visible() {
this.open = true;
},
novisible() {
this.open = false;
},
}));
queueMicrotask(() => {
Alpine.start();
});
Solved! There was no need to hide the picture, there was no jump!
x-show="!open"
I can't seem to find a solution for this anywhere.
I have a page with three elements displayed via flex: header, container and footer. The header and footer contain just what they need to, but container must take up all space left in the window. This is achieved via flex properties.
I would like to insert a Slick Carousel and have it contained the same way you can contain an image as a background (but with img tags, for semantics).
You can see example code here:
<html>
<head>
<title>Manuel del Pozo | Interiorismo & Diseño</title>
</head>
<body>
<div class="flex-container">
<header>
<div class="links">
<div class="lang-selector">
EN
/ ES
/ PT
</div>
<div class="social-links">
Fb
Tw
Ig
</div>
<div class="clearfix"></div>
</div>
<div class="logo-header">
<h1>Manuel del Pozo</h1>
<h2>Interiorismo & Diseño</h2>
</div>
<nav>
Home
Estudio
Proyectos
Servicios
About Me
Contacto
</nav>
</header>
<div class="container">
<div class="carousel">
<img src="http://www.manueldelpozoid.com/root/img/portfolio/01.jpg" alt="Portfolio Image 01">
</div>
</div>
<footer>
<div class="philo">
<p>Creamos un espacio hecho a tu medida, adaptándolo a tus gustos y necesidades</p>
</div>
<div class="footer-contact">
manuel#fake.com
<p> | </p>
<p>Tlf.: XXX XXX XXX</p>
</div>
</footer>
</div><!-- end of flex-container -->
</body>
</html>
http://codepen.io/anon/pen/MaRPop?editors=110
It does not have the carousel, just an image to make this easier.
Thanks!
Not exactly sure what you need, so try adding the following CSS to your style.css and see if I'm close.
CSS
/*******************************************************************************
GENERAL
*******************************************************************************/
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
font-family: 'Courier', serif;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*******************************************************************************
FLEX DISPLAY SETTINGS
*******************************************************************************/
.flex-container {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
align-items: center;
width: 100%;
height: 100%;
max-height: 100%;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
}
.flex-container header {
flex: 0 0 15vh;
position: fixed;
top: 0;
height: 15vh;
width: 100%;
}
.flex-container .container {
flex: 1 0 70vh;
width: 100%;
height: calc(100% - 30vh);
overflow-y: auto;
overflow-x: hidden;
position: absolute;
top: calc(100% - 30vh);
}
.flex-container footer {
flex: 0 0 15vh;
position: fixed;
bottom: 0;
height: 15vh;
width: 100%;
}
Using zer00ne CSS, I put a fixed height for both header and footer and then used a calculation for the container "100vh - (header+footer)". Then asigning 100% height to all elements until the img, which I put with object-fit:contain;
That fixed it for me
I have a three column layout where the logo at browser view is to the left, one word is in the middle, and the nav menu is to the right. This is fine at full browser.
When it is resized to mid or mobile view the columns are not clearing and stacking correctly.
Here is what I am getting right now at full view: http://postimg.org/image/wvfl1hkut/
Here is what needs fixed at mobile and mid view: http://postimg.org/image/sa1nvyw8j/
Here is my code:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="header">
<div class="col-xs-6 col-sm-4">
<a href="{{ URL::route('home') }}">
<div class="header_group">
<img src="../../images/logo.png">
</div><!--header group -->
</a>
</div>
<div class="col-xs-6 col-sm-3"></div>
<div class="col-xs-6 col-sm-4">
<p> </p>
</div>
<div class="col-xs-6 col-sm-4">
#include('layout.navigation')
</div>
</div><!-- main header -->
</div><!-- row -->
</div>
</div>
External CSS sheet
.header {
width: 100%;
height: auto;
margin: 0 auto;
background: red;
}
.header_group {
background-color: none;
width: 100%;
height: auto;
display: inline-table;
font-size: 1.5em;
font-weight: 400;
font-family: 'Roboto', sans-serif;
color: #f0fff0;
clear: none;
margin-top: 5%;
}
.header_text {
vertical-align: middle;
display: inline;
text-align: center;
color: #f05152;
}
.nav {
width: auto;
height: auto;
margin-top: 12%;
}
.nav a {
color: #000;
padding-left: 10%;
margin-left: 4%;
}
.navbar {
width: 100%;
height: 20%;
padding-top: 0;
}
.wrapper {
width: 100%;
height: 500px;
background: url(../../../images/yellow.png) repeat,
}
Bootstrap has a 12 column grid. Each set of 12 columns should be contained in a .row.
Your code has 4 .col-xs-6 columns, which total 24 columns. It also has 3 .col-sm-4 and 1 .col-sm-3 columns, which total 15 columns.
If you place the columns in their correct rows of 12 then they will clearfix correctly.
FYI: From the documentation...
Content should be placed within columns, and only columns may be immediate children of rows.
Move .header.
I have a problem with my footer, I want to put my image up higher so that the bottom of it will be even with the copy right info. I'm using HTML 5 and CSS 3, that image is below the copy right info, I have tried everything I can think of to make the image float up to where I can think of and now I'm asking you guys for help.
here is my html
<div class="main-footer">
<div class="footer">
<article class="contact-us">
<h2>CONTACT US</h2><br>
<p>Email: <a href="#">
info##</a></p><br>
<p>Personnel Network Incorporated<br>
address <br>
address</p><br>
<p>Phone: </p><br>
<footer class="copyright">
<p>Copyright © 2013 Personnel
Network, Inc. All rights reserved.</p>
</footer>
<img alt="PNI logo" src="Images/pni-logo.jpg">
</article>
</div>
And here is the css
.footer {
color: #729AA9;
width: 70%;
margin: auto;
overflow: hidden;
}
.contact-us {
width: 60%;
float: left;
margin: 2% 3%;
}
.contact-us a {
color: #1C5ACB;
}
.copyright {
background-color: black;
width: 70%;
float: left;
}
.contact-us img {
width: 230px;
height: 80px;
float: left;
}
You can vertically align your copyright and image to the bottom, so that the bottom of the copyright and the bottom of the image line up:
Updated CSS:
.contact-us div {
vertical-align: bottom;
}
.copyright {
background-color: black;
width: 40%;
vertical-align: bottom;
display: inline-block;
}
.contact-us img {
width: 230px;
height: 80px;
vertical-align: bottom;
display: inline-block;
}
Updated HTML:
<div class="footer">
<article class="contact-us">
<h2>CONTACT US</h2><br>
<p>Email: <a href="#">
info##</a></p><br>
<p>Personnel Network Incorporated<br>
address <br>
address</p><br>
<p>Phone: </p><br>
<div class="footer-wrapper-class">
<footer class="copyright">
<p>Copyright © 2013 Personnel
Network, Inc. All rights reserved.</p>
</footer>
<img alt="PNI logo" src="Images/pni-logo.jpg">
</div>
</article>
</div>
This will actually move your copyright down to the same height as the bottom of the image (rather than moving your image up). If this is too low, you can add this CSS:
.footer-wrapper-class {
margin-top: -10px; // Set this to whatever amount you want to move them up
}
JSFiddle: http://jsfiddle.net/JZW7X/
I have seven divs with id 1 to 7 in my html when I resize my window diagonally then the fittextjs plugin resizes the text within the 7 divs thats fine.
When I resize the window horizontally then the font-size decreases/increases fine...
What is not working as expected is: When I resize the window only vertically then the font-size does not decrease/shrink.
How can I make it work for the last non-working case?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FitText</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
font-family: arial;
/*overflow: hidden;*/
}
* { /* Every element which has a border or padding value puts this value inside the div */
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
}
._Z {
width: 12.50%;
}
.Stack {
display: table;
height: 100%;
float: left;
}
.Stack li {
list-style: none;
display: table-row;
}
.Stack li div {
display: table-cell;
}
.horizontal-right {
text-align: right;
}
.horizontal-center {
text-align: center;
}
.vertical-center {
vertical-align: middle;
}
#responseView {
height: 100%;
}
</style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="responseView" data-bind="swipeLeftRightContentViews: $root.showMapView">
<div style="height: 100%;">
<ul class="Stack _Z" data-bind="foreach: replyTimeStack.segments">
<li style="height:14.2%;background: green; color: black;">
<div id="div1" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">1</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div2" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">2</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div3" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">3</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div4" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">4</div>
</li>
<li style="height:14.2%;background: yellow; color: black;">
<div id="div5" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">5</div>
</li>
<li style="height:14.2%;background: orange; color: black;">
<div id="div6" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">6</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div7" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">7</div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$("#div1").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div2").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div3").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div4").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div5").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div6").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div7").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
</script>
</body>
</html>
In order to make it work like that, you should tweak their resizer function in the script... setting up to measure the font size based on height rather than width.
$this.css('font-size', Math.max(Math.min($this.height() / (compressor*2), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
that should make it work based on the height..
Cheers!