CSS Img resize transition time only on hover - html

I'm having an issue with an animation on one of my images. I want the image to resize on hover with a transition time (and then have a transition time back to the original size when the mouse moves off the image) but then when i resize the window and the image resizes accordingly, it resizes with the transition time . Does anyone know a way to get around this?
<div class="column">
<a href="-----.html">
<img src="-----.jpg">
</a>
</div>
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:100%;
height: calc(100vh - 300px);
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
height: calc(110vh - 300px);
}
I can see why the transition applies to the image when the window resizes, but i don't know how else to get the transition to apply when the mouse moves away. Can anyone suggest a way around this?
Gif of resizing issue
edit: full code posted below
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>


You could set the transition on your image only when the window is hovered. This way, on resize it won't affect your element anymore, but on your element's hover and mouseout it will still be active.
/* when hovering the page */
:hover .row .column img {
transition: 0.6s ease;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
/* transition: 0.6s ease; [removed]*/
}
.row .column:hover img {
/* transition: 0.6s ease; [useless]*/
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
But using this solution, if mousing-out from the document itself, then the transition will also get disabled...
Unfortunately, I don't see any other solution than that, except using js of course.
(function(){
let timer;
const docEl = document.documentElement;
addEventListener('resize', e => {
clearTimeout(timer);
docEl.classList.add('resizing');
timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
});
})();
:root.resizing .row .column img {
transition: none;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
transition: 0.6s ease;
}
.row .column:hover img {
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>


You need to assign width without hover for animation on mouse out, check it
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:35%;
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
}
<div class="column">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>


Try this:
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(0%,0%);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(0%,0%); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
#keyframes icon-wrap {
0% { transform:translate(0%,0%); }
100% { transform: translate(40%,40%)scale(2);
width:150px;
height:150px;
}
}
#-webkit-keyframes icon-wrap {
0% { transform: translate(0%,0%); }
100% { transform: translate(40%,40%) scale(2);
width:150px;
height:150px; }
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(40%,40%)scale(2);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(40%,40%)scale(2); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>


Try using scale(2) it's working well for me.
But you need to change translate() value as per the scale() value as per your requirement.
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
}
.column:hover img{
filter: brightness(0.5);
transform: translate(50%,50%) scale(2);
transition: 0.6s ease;
}
<div class="column">
<a href="-----.html">
<img src="https://picsum.photos/300/100/?random">
</a>
</div>
Updated with your code.
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-10%,-10%) scale(1.3);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>
Hope this was helpful for you.

Related

CSS how can I make text appear next to an image on hover instead of on it?

I've been trying to figure out how I can make a block of text appear to the side of an image when hovered over instead of appearing on top of it, however I can't seem to find any explanations for anything other than having the text fade in on the actual image itself. This is what I've been experimenting with(adapted from w3schools), as of right now it only has the text on the image. If anyone could edit it so that the text comes to the side that would be incredibly helpful.
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
color: black;
font-size: 16px;
padding: 16px 32px;
}
<div class="container">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="placeholder" class="image" style="width:100%">
<div class="middle">
<div class="text">This should be to the side of the image</div>
</div>
</div>

If I understand correctly, you want the text to be outside of the image.
You are using position: relative on the .container, that's why the .middle will stay inside of it, removing that will solve the issue:
.container {
/* position: relative; */
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 0;
left: 50%;
/* transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center; */
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
color: black;
font-size: 16px;
padding: 16px 32px;
}
<div class="container">
<img src="https://via.placeholder.com/350x150" alt="placeholder" class="image" style="width:100%">
<div class="middle">
<div class="text">This should be to the side of the image</div>
</div>
</div>

Check if that's what you need (made myself a quick example) :
.container {
display: flex;
}
.leftBlock {
width: 50%;
height: auto;
transition: all 0.3s ease;
}
.leftBlock:hover {
opacity: 0.5;
}
.leftBlock:hover + .rightBlock {
opacity: 1;
}
.rightBlock {
right: 0;
background-color: #222;
flex-grow: 1;
text-align: center;
vertical-align: middle;
opacity: 0;
transition: all 0.4s ease;
color: #fff;
}
<div class="container">
<img src="https://images.pexels.com/photos/3683056/pexels-photo-3683056.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="leftBlock">
<div class="rightBlock">Text Goes Here</div>
</div>

Bootstrap 4 cards coming out of container div and overlapping next element

I'm trying to build a responsive template with bootstrap 4 where there are three cards involved inside a container div. When changing the aspect ratio in mobile view, the cards are coming out of the container div and overlapping to the footer element outside it's container. Check my code below:
HTML:
<div class="container-fluid parallax">
<div class="d-flex justify-content-center">
<h1 class="title"><strong>Our Services</strong></h1>
</div>
<div class="parallax-row row justify-content-center">
<div class="parallax-cell col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/web_dev_service.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>header</h2>
<a class="info" href="#">Know More</a>
</div>
</div>
</div>
<div class="parallax-cell col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/digital_marketing_service.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>header</h2>
<a class="info" href="#">Know More</a>
</div>
</div>
</div>
<div class="parallax-cell col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/creative_logo_service.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>header</h2>
<a class="info" href="#">Know More</a>
</div>
</div>
</div>
</div>
</div>
CSS:
.parallax {
background-image: url("/assets/images/home_services.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #ff0;
position: relative;
}
.parallax-row {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.parallax-cell {
align-self: center;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
border-radius: 5%;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
background-color: #f00;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding: 10px;
}
.hovereffect a.info {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin: 50px 0 0;
padding: 7px 14px;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.hovereffect:hover h2,
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}

Just do two things.
Replace .parallax-row with below.
.parallax-row {
display: flex;
justify-content: center;
align-items: center;
}
Replace .parallax-cell with below.
.parallax-cell {
align-self: center;
margin-bottom: 20px;
}
Here is running JSFiddle - https://jsfiddle.net/t4qfvmkr/

just need to change the property min-height to height: 100% in parallax class

How to fix buggy CSS hover

I am coding a page to select different products. each 'bild box' in my HTML is supposed to display a product and when you hover with you mouse over it, it zooms into the picture and a few other styling effects happen. When hovering over the boxes you can see, that randomly the boxes zoom and it looks glitchy. Here is a demonstration of the effect: https://streamable.com/wei69
I have tried to specify the different hover boxes which makes the code unnecessarily long and didn't fix the problem. Before I did this there were no classes like 'title1, title2' it was only 'title'.
I also tried different browsers and in Safari the effect isn't that bad but it is still not user friendly.
Here is my code:
#flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.bildbox1,
.bildbox2,
.bildbox3,
.bildbox4,
.bildbox5,
.bildbox6 {
width: 100vw;
margin-left: calc(50% - 50vw);
height: 300px;
overflow: hidden;
text-align: center;
}
.bild1,
.bild2,
.bild3,
.bild4,
.bild5 {
width: 100%;
height: 100%;
background-color: black;
/* fallback color */
background-position: center;
background-size: cover;
-webkit-transition: all .3s ease;
}
.bild1 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild2 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild3 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild4 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild5 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.textbox {
background-color: #F2F2F2;
height: 100%;
padding-top: 20%;
text-align: center;
}
.textbox p {
color: darkgrey;
}
.point1,
.point2,
.point3,
.point4,
.point5 {
width: 75px;
margin: auto;
position: absolute;
top: 10px;
left: 0;
bottom: 0;
right: 0;
height: 1px;
background: white;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
display: none;
}
.konfigurieren-button1,
.konfigurieren-button2,
.konfigurieren-button3,
.konfigurieren-button4,
.konfigurieren-button5 {
background: #E30D27;
color: white;
padding: 0 10px;
text-align: center;
height: 30px;
line-height: 1.2;
vertical-align: top;
font-weight: bold;
font-size: 10px;
#include inline-flexbox();
#include align-items(center);
#include justify-content(center);
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
border-radius: 100px;
position: relative;
top: 50px;
z-index: 99;
}
.title1,
.title2,
.title3,
.title4,
.title5 {
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: relative;
top: 100px;
left: 0;
bottom: 0;
right: 0;
height: 50px;
display: block;
color: white;
padding: 25%;
}
.konfigurieren-button1:hover,
.konfigurieren-button2:hover,
.konfigurieren-button3:hover,
.konfigurieren-button4:hover,
.konfigurieren-button5:hover,
{
color: black;
background-color: white;
}
#media (hover: hover) {
.bildbox1:hover .bild1,
.bildbox1:focus .bild1 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox2:hover .bild2,
.bildbox2:focus .bild2 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox3:hover .bild3,
.bildbox3:focus .bild3 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox4:hover .bild4,
.bildbox4:focus .bild4 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox5:hover .bild5,
.bildbox5:focus .bild5 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox1:hover .title1,
.bildbox2:hover .title2,
.bildbox3:hover .title3,
.bildbox4:hover .title4,
.bildbox5:hover .title5 {
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
opacity: 1.0;
color: white;
padding: 25%;
}
.point1,
.point2,
.point3,
.point4,
.point5 {
width: 0px;
display: initial;
top: 17%;
}
.title1,
.title2,
.title3,
.title4,
.title5 {
opacity: 0.0;
position: absolute;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
top: 0;
}
.konfigurieren-button1,
.konfigurieren-button2,
.konfigurieren-button3,
.konfigurieren-button4,
.konfigurieren-button5 {
opacity: 0.0;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
margin-top: 135px;
}
.bildbox1:hover .konfigurieren-button1,
.bildbox2:hover .konfigurieren-button2,
.bildbox3:hover .konfigurieren-button3,
.bildbox4:hover .konfigurieren-button4,
.bildbox5:hover .konfigurieren-button5 {
opacity: 1.0;
}
.bildbox1:hover .point1,
.bildbox2:hover .point2,
.bildbox3:hover .point3,
.bildbox4:hover .point4,
.bildbox5:hover .point5 {
width: 75px;
}
}
#media (min-width: 900px) {
.bildbox1,
.bildbox2,
.bildbox3,
.bildbox4,
.bildbox5,
.bildbox6 {
width: 400px;
}
}
<div id="flex-container">
<div class="bildbox1">
<div class="bild1">
<span class="title1"> Text 1</span>
<a href="">
<button class="konfigurieren-button1"> Button 1</button>
</a>
<div class="point1"></div>
</div>
</div>
<div class="bildbox2">
<div class="bild2">
<span class="title2"> Text 2</span>
<button class="konfigurieren-button2">Button 2</button>
<div class="point2"></div>
</div>
</div>
<div class="bildbox3">
<div class="bild3">
<span class="title3">Text 3</span>
<button class="konfigurieren-button3">Button 3</button>
<div class="point3"></div>
</div>
</div>
<div class="bildbox4">
<div class="bild4">
<span class="title4"> Text 4</span>
<button class="konfigurieren-button4">Button 4</button>
<div class="point4"></div>
</div>
</div>
<div class="bildbox5">
<div class="bild5">
<span class="title5"> Text 5</span>
<button class="konfigurieren-button5">Button 5</button>
<div class="point5"></div>
</div>
</div>
<div class="bildbox6">
<div class="textbox">
<h3> header </h3>
<p> paragraph
</p>
</div>
</div>
</div>

Add position: relative; to you .bildbox classes.
.bildbox1,
.bildbox2,
.bildbox3,
.bildbox4,
.bildbox5,
.bildbox6 {
width: 100vw;
margin-left: calc(50% - 50vw);
height: 300px;
overflow: hidden;
text-align: center;
position: relative; /* <-- Add this here */
}
You have position: absolute; elements (your .point classes) that are all over the place. They need to be contained in the "boxes". When you are hovering, those position absolute elements are outside the box and overlapping other boxes.
Remember when using position absolute, that element with position itself of the first parent with a position other than static, else it will be the document window.
On a side note, is there a reason you are using classes like ids? Why do you have .bildbox1, .bildbox2, etc when you should just have 1 .bildbox class.

How do I stack images on top of each other wrapped in the same div, and then have them separate with animation when I hover?

HTML:
<div class="mySlides">
<img src="1.jpg">
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
</div>
CSS:
.mySlides {
padding-top: 25%;
padding-left: 5%;
}
.mySlides img {
object-fit: cover;
position: absolute;
max-width: 35%;
}
.mySlides img:nth-of-type(1) {
left: 0%;
top: 0%;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
This will be repeated for all images, i.e. nth-of-type(2,3,4,5)
.mySlides img {
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
padding: 10px 10px 30px 10px;
background: linear-gradient(#ffffff, #eaeaea);
border: solid 1px black;
}
I wanted to stack the images on top of each other and have them all centered on the screen.
On hovering I wanted the images to separate horizontally while still maintaining the animation.

Check this out
Working fiddler https://jsfiddle.net/RaajNadar/L0ennqwp/
Html
<div class="mySlides">
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/400/200/sports"/>
</div>
css
.mySlides {
position: relative;
}
.mySlides img {
position: absolute;
top: 0;
left: 0;
max-width: 300px;
transition: left 1.2s ease-in-out;
}
.mySlides:hover img:last-child {
left: 300px;
}
Also got a nice animation.

Is this what you need?
.mySlides {
display: flex;
position: relative;
}
.mySlides img {
position: absolute;
top: 0;
left: 0;
}
.mySlides:hover img {
position: relative;
top: auto;
left: auto;
}
<div class="mySlides">
<img src="http://placehold.it/300x150/000000">
<img src="http://placehold.it/300x150/003300" />
<img src="http://placehold.it/300x150/00ff00" />
<img src="http://placehold.it/300x150/006600" />
<img src="http://placehold.it/300x150/ff0000" />
</div>

Slanted Div Hover Troubles

I've created a Slanted Div, however I ran into problem I cannot solve, I've googled this but did not find any answers.
body {
background: black;
}
#slantedwrapper {
overflow: hidden;
margin-left: 50px;
}
#slanted {
display: inline-block;
/* margin-right:-4px; */
width: 400px;
margin-left: -45px;
/* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
}
#slanted a {
position: relative;
background-color: #1d1d1d;
/* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
box-sizing: border-box;
background-size: cover;
/* padding:1em; */
display: block;
transform: skewX(-30deg);
width: 100%;
min-height: 3.5em;
text-align: center;
border-right: 5px solid #20c397;
height: 150px;
/* line-height: 110px; */
overflow: hidden;
}
#slanted span {
color: white;
position: absolute;
box-sizing: border-box;
transform: skewX(30deg);
left: 0;
width: 100%;
/* height: 150px; */
/* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
}
}
}
.current a {
background:#70cb00;
}
#slanted a img {
transform: skewX(30deg);
overflow: hidden;
margin-top: -20px;
padding-top: 0px;
width: 123%;
height: 123%;
margin-left: -50px;
opacity: 0.6;
-webkit-transition: opacity 0.3s linear 0s;
-o-transition: opacity 0.3s linear 0s;
transition: opacity 0.3s linear 0s;
}
#slanted img:hover {
opacity:1;
}
#caption {
background-color: #333333;
width: 100%;
height: 25px;
display: block;
position: absolute;
bottom: 0;
z-index: 99;
opacity: 0.7;
color: #D2D2D2;
-webkit-transition: background-color 0.3s linear 0s;
-o-transition: background-color 0.3s linear 0s;
transition: background-color 0.3s linear 0s;
}
/*Combination hover effects*/
#slanted:hover #caption {
background-color: #20c397;
opacity:1.0;
}
#slanted:hover img {
opacity:1.0;
}
/* END OFCombo hover effects*/
p.nonskew {
transform: skewX(30deg);
color: White;
margin: 0;
margin-left: 22%;
padding: 1.5%;
text-align: left;
font-size: 0.8em;
}
<div id="slantedwrapper">
<div id="slanted">
<a href="#">
<div id="caption">
<p class="nonskew">A Caption: Description</p>
</div>
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg" alt="SLANTED DIV"></a>
</div>
<!--end of wrapper-->
</div>
JSFiddle version
here's the problem:
Hover over the div, it hovers fine, but at the bottom right corner, where nothing is there (where the overflow is hidden) still hovers if you place your mouse over the blank area where the angle begins, how do I solve this into when it hovers- it only applies to shape of the div only?
Thank you

You seem to have the right idea, using both the unskew and intuitive to using the skew, however, something like the below example may work for you:
html {
background: radial-gradient(#222, blue);
height: 100%;
}
div.wrap{
height: 150px;
width: 300px; position: relative;
overflow: hidden;
}
div.innerwrap {
height: 100%;
width: 100%;
transform: skewX(-30deg);
position: absolute;top:0;left:0;
overflow: hidden;
margin-left: -70px;
transition: all 0.4s;
border-right: 5px solid tomato;
cursor:pointer;
}
div.innerwrap:hover span {
background: gold;
}
div.innerwrap:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/300/300);
transform: skewX(30deg);
transform-origin: top left;
}
div span {
position: absolute;
bottom: 0;
left: 0%;
width: 120%;
transform: skewX(30deg);
background: red;
text-align:center;
transition: all 0.4s;
}
<div class="wrap">
<div class="innerwrap">
<span>TITLE</span>
</div>
</div>
For further information, #Harry has created a wide variety of examples here in which you may find useful.