Alpine js, mouseover to show text, no jumping content - mouseover

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"

Related

Safari nested flexbox performance issue

I have a complex flex-based angular page, with a big amount of nested flex items. I need to have customizable stretch elements to the end of page and use scroll by some of inner containers.
Chrome/Edge/Firefox doing well, as expected. But Safari start to freeze whole page.
I have analyzed styles of all elements. And, for demonstrate this issue, I created demo page.
let startTime = new Date().getTime();
window.onload = () => {
window.onload = null;
setTimeout(() => {
const endTime = new Date().getTime();
const timeSpend = endTime - startTime;
const loadTime = `Loading time: ${timeSpend}ms`;
console.log(loadTime);
const input = document.querySelector("label");
input.innerText = loadTime;
startTime = new Date().getTime();
});
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.flex-item {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background: rgba(0, 128, 0, 0.05);
}
.block-item {
display: block;
height: 100%;
width: 100%;
background: red;
}
div {
border: 1px solid black;
border-radius: 5px;
padding: 2px 10px;
position: relative;
}
span {
position: absolute;
top: 0;
left: 0;
}
label {
position: fixed;
left: 200px;
top: 10px;
background: white;
z-index: 10;
box-shadow: 0px 0px 10px 2px black;
border-radius: 20px;
padding: 5px;
}
<label></label>
<div class="flex-item"><span>0</span>
<div class="block-item"><span>1</span> <!-- block here -->
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or demo on codepen: https://codepen.io/JBeen/full/LYBwYmJ
Tried on Safari 16.3 and Safari TP 16.4 on Macbook Pro 16 M2 Max
Loading time: ~3.5s
When I increase amount of nested elements and add 1 element -- loading time increase twice, and became ~7s. So after adding several more nested elements -- page start to freeze completely.
Does Safari have an issue on official bug tracker?
Or what I'm doing wrong?

Responsive side-by-side images with overlay text when hovering

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.

Keep Image Ascpect Ratio

I'm currently refactoring my website and try to get rid of a few breakpoints.
In my portfolio, I have an image gallery, which displays 3x3 image tiles. Those tiles are built with css grid. The tiles in my example should be 200px high and minmax (200px, 333px) width.
Currently, the tiles work as expected. But the images don't keep their aspect ratio. Is there any way to keep the original ratio and cut the images in their height? The smallest version of the container should be 200x200.
https://codepen.io/yanniksturm/pen/LYVegro
<div class="content">
<div id="img1" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
<div id="img2" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
<div id="img3" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
</div>
.content {
min-width: 600px;
max-width: 999px;
margin: auto;
width: 80%;
backgeound-color: red;
display: grid;
grid-template-columns: minmax (200px, 333px) minmax (200px, 333px) minmax (200px, 333px);
grid-template-rows: 200px;
}
.imageWrapper {
height: 100%;
width: 100%;
}
img {
height: 100%;
width: 100%;
}
#img1 {
grid-column: 1;
}
#img2 {
grid-column: 2;
}
#img3 {
grid-column: 3;
}
Thanks a lot for your help!
You need to set your img width and height to auto and add a max-width: 100%; to it in order to keep the aspect ratio.
img {
height: auto;
width: auto;
max-width: 100%;
}
See below snippet.
You could use object-fit: cover; but that is not supported in older browsers (I am looking at IE11).
.content {
min-width: 600px;
max-width: 999px;
margin: auto;
width: 80%;
backgeound-color: red;
display: grid;
grid-template-columns: minmax (200px, 333px) minmax (200px, 333px) minmax (200px, 333px);
grid-template-rows: 200px;
}
.imageWrapper {
height: 100%;
width: 100%;
border: 1px solid red;
}
img {
height: auto;
width: auto;
max-width: 100%;
}
#img1 {
grid-column: 1;
}
#img2 {
grid-column: 2;
}
#img3 {
grid-column: 3;
}
<div class="content">
<div id="img1" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
<div id="img2" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
<div id="img3" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
</div>

IMG Tag Contain inside flex div

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

twitter bootstrap columns not clearing

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.

Resources