I have the following html :
<html>
<head>
<title>asd</title>
</head>
<body>
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</body>
</html>
and the following css :
* { box-sizing: border-box; }
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: stretch;
justify-content: center;
}
.slide {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100vh;
transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide1 {
background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide2 {
background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Galaxy-Space-Full-HD-Wallpaper.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide3 {
background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Landscape-Full-HD-Wallpaper.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide4 {
background-image: url('http://hdwpro.com/wp-content/uploads/2018/10/Free-Desktop-Background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide:hover {
transform: scale(1.2);
z-index:20;
}
The zoom inside the div flex seems like a minor glitch on transform scale
and i also want to find a way to just zoom the background image inside the div and not the div (that will be scaled outside of the view-port).
I tried adding a parent wrapper but it scales the div and not the background image .
As you can see in this Codepen :
https://codepen.io/pufosme/pen/MZWWpM
Thank you !
You can try like below. I wrapped the slides with a parent container and added overflow: hidden.
* {
box-sizing: border-box;
}
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: stretch;
justify-content: center;
}
.parent {
flex: 1;
height: 100vh;
overflow: hidden;
}
.slide {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100%;
transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide1 {
background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide2 {
background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Galaxy-Space-Full-HD-Wallpaper.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide3 {
background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Landscape-Full-HD-Wallpaper.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide4 {
background-image: url('http://hdwpro.com/wp-content/uploads/2018/10/Free-Desktop-Background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide:hover {
transform: scale(1.2);
}
<div class="wrapper">
<div class="parent">
<div class="slide slide1"></div>
</div>
<div class="parent">
<div class="slide slide2"></div>
</div>
<div class="parent">
<div class="slide slide3"></div>
</div>
<div class="parent">
<div class="slide slide4"></div>
</div>
</div>
Personally, I would use an IMG inside each slide (using object-fit and object-position to replace the background properties). Then scale the image and not the slide and, on each slide, you set overflow: hidden.
Like this https://codepen.io/anon/pen/bOGNoN
.slide {
...
width: 100%;
height: 100vh;
overflow: hidden;
}
.slide img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide:hover img {
transform: scale(1.2);
z-index:20;
-webkit-box-shadow: 0px 0px 10px 0px rg-webkit-box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.5);
box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.5);
}
and the HTML
<div class="slide slide1">
<img src='http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg' />
</div>
Related
I'd like the navigation arrows to align vertically middle.
On the live site they are off-center.
There is compromising CSS I can't change which sets a top: 40% for the arrows (.owl-nav button).
I've tried unseting their top, but this pushes them to underneath the image.
I've tried setting top: calc(50% - 37.5px); (minus half the button's height of 75px) but this is off-center. Is my math right here?
I've been able to get it working below by using a fixed height for .owl-nav.pp-carousel-nav but on the live page the .owl-items are not of fixed width and height, they are responsive.
.owl-carousel .owl-stage {
position: relative;
}
.pp-content-post-carousel {
position: relative;
}
.landscape-carousel-container {
width: 100%;
}
.landscape-carousel-content {
width: 100%;
}
.landscape-carousel-overlay {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 236px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
opacity: 0;
transition: .4s ease !important;
border-radius: 15px;
background-color: #22a1d9;
}
.landscape-carousel-img {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 236px;
margin-bottom: 10px;
padding-bottom: 0px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: rgba(14,34,129,0);
background-image: url("https://cdn-ehbod.nitrocdn.com/MnwLQZiWrxfKgQoPapfeSJHycGHMrPjW/assets/static/optimized/rev-315e7f6/img/background-image.svg");
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
cursor: pointer;
border-radius: 15px;
border: 3px solid #dfefef;
}
.owl-nav.pp-carousel-nav {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 242px;
width: 370px;
position: absolute;
top: 10px;
}
.owl-nav button {
position: absolute;
line-height: 1;
margin: 0;
font-size: 20px;
background: none !important;
z-index: 1;
border: none;
background-color: transparent;
}
.owl-nav button.owl-prev {
left: -15px;
}
.owl-nav button.owl-next {
right: -15px;
}
.owl-nav button svg {
width: 51px;
height: 51px;
color: white;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.sr-only {display: none;}
<div class="owl-item cloned" style="width: 370px;">
<div class="pp-content-post pp-content-carousel-post pp-grid-custom post-6474 templates type-templates status-publish hentry templatecategory-hospitality templatecategory-landscape-liquor-hospitality-2 templatecategory-liquor" itemscope="" itemtype="https://schema.org/CreativeWork" data-id="6474" style="visibility: visible; height: 269.2px;">
<div class="landscape-carousel-container">
<div class="landscape-carousel-content">
<div class="landscape-carousel-overlay">
Edit this Template </div>
<div style="background-image: url("https://cdn-ehbod.nitrocdn.com/MnwLQZiWrxfKgQoPapfeSJHycGHMrPjW/assets/static/optimized/rev-315e7f6/wp-content/uploads/2021/06/landscape_Hospitality_Liquor_001.jpg");" class="landscape-carousel-img lazyloaded" nitro-lazy-bg="https://cdn-ehbod.nitrocdn.com/MnwLQZiWrxfKgQoPapfeSJHycGHMrPjW/assets/static/optimized/rev-315e7f6/wp-content/uploads/2021/06/landscape_Hospitality_Liquor_001.jpg"></div>
<div>Liquor Store - Many Bottles</div>
</div>
</div>
</div>
</div>
<div class="owl-nav pp-carousel-nav">
<button type="button" role="presentation" class="owl-prev">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512">
<path fill="currentColor" d="M25.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L64.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L25 264.5c-4.6-4.7-4.6-12.3.1-17z" class=""></path>
</svg>
<span class="sr-only">Previous</span>
</button>
<button type="button" role="presentation" class="owl-next">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512">
<path fill="currentColor" d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z" class=""></path>
</svg>
<span class="sr-only">Next</span>
</button>
</div>
Here the answer as stated in the comment:
The problem is caused by the navigation elements parent box. It also includes the text below - therefore, you don't center it relative to the image, but to the image & its descriptive text. As you probably cannot change the html structure here I suggest you simply change the css calculation by to something like
top: calc(50% - 45px);
The height of the button is 66px and positions in relation to the div with class="pp-content-post-carousel pp-equal-height clearfix" which is 33.19px taller than the images.
I am really new to working on this, the problem I have is two
What I am trying to do is give it to show the menu as shown in the following image:
I can not put the option that was selected underlined, and so that the displayed menu is horizontal, what I have is this:
Searching the web I have not found anything to solve it or something to take an example to solve my problem, I am working with CSS and Vue.Js, if someone can tell me how to solve this
Underline the selected menu and see the menu displayed horizontally
My Code:
<div class="panel-group" id="accordion-mbl-menu">
<div class="panel">
<b-navbar-toggle target="collapse-cat-lvl1-469">
Accesorios
<img src="#/assets/images/layout/menu/chevron.svg" class="icon">
</b-navbar-toggle>
<div style="background-color:white;">
<b-collapse id="collapse-cat-lvl1-469">
<div data-cat-acc="473" class="grid-item parent-lvl-2">
<a class="link -1 grid-sty-1" href="#" target="_self" data-menu-item-id="473">
<span class="text">GTI</span>
</a>
</div>
...
(other menu options)
...
</b-collapse>
</div>
</div>
<div class="panel">
<button type="button" class="navbar-toggler collapsed"> ¿Necesitas ayuda? </button>
</div>
</div>
My code CSS
#media (max-width: 828px) {
#menu-header.show {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#menu-header {
display: block ;
position: fixed;
z-index: 1;
background-color: #FFF;
left: 0;
top: 100px;
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
width: 90%;
padding: 20px 20px;
max-width: 87.5%;
transform: translateX(-100%);
transition: transform 650ms ease;
.grid-sty-1 {
height: 55px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
height: 40px;
font-size: 16px;
font-family: "VWHead-Bold", sans-serif;
position: relative;
a{
text-decoration: none;
outline: none !important;
padding-right: 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
> .text {
padding-left: 15px;
color: #001E50;
}
}
.navbar-greetings{
font-family: 'VWHead-Regular';
font-size: 24px;
line-height: 29px;
display: flex;
align-items: center;
color: #001E50;
}
#accordion-mbl-menu {
margin: 0;
.panel {
box-shadow: none !important;
background-color: transparent;
border-radius: 0;
border: 0;
margin-bottom: 0;
> button.collapsed {
color: #001e50;
> .icon{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
> button.not-collapsed > .icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
> button {
margin: 0px;
padding: 0px;
width: 100%;
height: 55px;
font-size: 20px;
font-family: "VWHead-Bold";
font-weight: normal;
color: #2f3538;
text-decoration: none;
outline: none !important;
border-bottom: 1px solid #dee1e3;
padding-right: 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
> .icon {
width: 20px;
height: 20px;
fill: currentColor;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
position: absolute;
right: 15px;
top: auto;
}
.collapse.in {
display: block;
}
}
}
}
}
}
Any way to style this?
To show underline on hover
.class:hover {
text-decoration: underline;
}
To display horizontal
.container {
display: flex;
flex-direction: row;
}
I have implemented a flip card. It has a button. Everything works fine but not the button. If I removed the css out of the entire thing, the button works but obviously I lose the effects and flip. I even tried putting a link on the entire image, still the link doesn't work. It looks like something is preventing link in this entire thing. What am I doing wrong?
Fiddle Link
<style type="text/css">
.flip-card {
-webkit-perspective: 1000;
perspective: 1000;
border: 0;
background: transparent;
}
.flip-card:hover .flip-card-inner,
.flip-card:hover .flip-card-inner {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-card,
.flip-card-inner-front,
.flip-card-inner-back {
width: 100%;
height: 8rem;
}
.flip-card-inner {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-inner-front,
.flip-card-inner-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-card-inner-front {
background-size: cover;
background-repeat: no-repeat;
z-index: 2;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flip-card-inner-front span {
width: 100%;
text-align: center;
background: rgba(254, 254, 254, 0.8);
padding: 0.25rem 0;
font-size: 1.25rem;
font-weight: bold;
}
.flip-card-inner-back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
background: #cacaca;
padding: 1rem;
}
.flip-card-inner-back-title {
font-weight: bold;
}
.flip-card-inner-back-text {
line-height: 1.3;
}
</style>
html
<div class="row">
<div class="col-6 col-sm">
<div class="flip-card card" ontouchstart="this.classList.toggle('hover');">
<div class="flip-card-inner">
<div class="flip-card-inner-front" style="background-image: url('images/logobgs/merc200.jpg')"></div>
<div class="flip-card-inner-back" style="background-image: url('images/logobgs/logobg.jpg')"><img class="img-fluid" src="images/logos/merc.png" width="70" height="70"><br><button class="bg-warning"><small>View Mercedes Cars</small></button></div>
</div>
</div></div>
I've got an layout which looks like this and I'm trying to zoom image-background on hover, but I can't get this effect in any way without affecting neighbour elements (on hover it expands like this) - my aim is to zoom only image and stay inside the parent div element. Is there any workaround for this in flexbox layout? This is my code:
HTML:
<body>
<div class="index-wrapper">
<nav class="index-menu">
123
</nav>
<main class="index-main">
<div class="index-square" style="background: yellow;"></div>
<div class="index-square">
<div class="index-square-inner" style="background-image: url(assets/img/is-2.jpg); background-position: center; background-size: cover;transition: all .2s ease-in-out;">
<div style="background: rgba(0, 0, 0, 0.4);">
123
</div>
</div>
</div>
<div class="index-square" style="background: pink;">123</div>
<div class="index-square" style="background: purple;">123</div>
</main>
</div>
</body>
SCSS:
.index-wrapper {
display: flex;
flex-flow: column;
height: 100vh;
.index-menu {
box-shadow: 0 0 2px 2px #d0d0d0;
z-index: 2;
background: white;
color: black;
padding: 2em;
}
.index-main {
display: flex;
background: yellow;
flex-direction: row;
flex: 1;
flex-wrap: wrap;
.index-square {
flex-basis: 50%;
display: flex;
flex-flow: column;
.index-square-inner {
flex: 1;
width: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
&:hover {
transform: scale(1.1);
}
div {
flex: 1;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
You should add overflow: hidden; to the .index-square style definition;
.index-square {
flex-basis: 50%;
display: flex;
flex-flow: column;
overflow: hidden; /*Add this here*/
See this fiddle.
I am trying to remove the text-decoration of a flex child when the parent is the anchor. I've tried all of the following code, and it is not working at all. I've created a jsFiddle, and on that the underline shows all the time and not on hover. In my WordPress installation, it only shows on hover. I'm really not sure what to do! Any help is appreciated!
Thank you ahead of time!!!!
.fleximagebox_link:hover, a.fleximagebox_link:hover, a .fleximagebox_link:hover,
.fleximagebox_link a:hover, .fleximagebox_link:hover a,
a .fleximagebox_link p:hover, .image_background:hover, .image_background:hover a,
a .image_background:hover, .image_background.fleximagebox_link a:hover,
a .image_background.fleximagebox_link:hover {
text-decoration: none!important;
}
Here is the jsFiddle that explains what I'm talking about: https://jsfiddle.net/Clare12345/th60mde3/2/
This will get rid of the underline in your fiddle .flexbox_images a { text-decoration: none; }
As to why it's on your website, all we can do is guess if you don't include the code or a link to your site. But you might try changing that line to .flexbox_images a, .flexbox_images a:hover { text-decoration: none !important; }
.flexbox_images a {
text-decoration: none;
}
.main_box {
background: white;
height: 400px;
width: 100%;
margin: 0 auto;
padding: 0px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.main_box .flexbox_images {
color: white;
width: 100%;
padding: 0px;
overflow: auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flexbox_images a {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.image_background {
height: 250px;
margin: 0 auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
max-width: 101%;
}
.image_background_left {
background-repeat: no-repeat;
background-size: contain;
background-image: url(http://pipsum.com/350x240.jpg);
justify-content: flex-end;
margin-right: -1px;
}
.image_background_right {
background-repeat: no-repeat;
background-size: contain;
background-image: url(http://pipsum.com/350x240.jpg);
justify-content: flex-start;
margin-left: -1px;
}
.fleximagebox_link {
font-size: 28pt;
background: rgba(255, 255, 255, 0.85);
color: #000!important;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1.5px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 130px;
}
.image_background_left .fleximagebox_link {
justify-content: flex-end;
padding-left: 35px;
}
.image_background_right .fleximagebox_link {
justify-content: flex-start;
padding-right: 35px;
}
.image_background_right .fleximagebox_link p {
font-size: 28pt!important;
color: #000!important;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1.5px;
margin-bottom: 0px;
}
.main_black_bar {
width: 3px;
background: #000;
height: 50px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: -1px;
}
.image_background_left .main_black_bar {
margin-left: 35px;
}
.image_background_right .main_black_bar {
margin-right: 35px;
}
<div class="main_box">
<div class="flexbox_images">
<a href="">
<div class="image_background image_background_left">
<div class="fleximagebox_link">Buy
<div class="main_black_bar"> </div>
</div>
</div>
</a>
<a href="">
<div class="image_background image_background_right">
<div class="fleximagebox_link">
<div class="main_black_bar"> </div>Sell</div>
</div>
</a>
</div>
</div>