Skip to main navigation Skip to main content Skip to page footer
Tonis Weblocal Tonis Weblocal

Embed responsive Video 

.video-wrapper {
   width: 600px;
   max-width: 100%;
   } 

.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px; height: 0; overflow: hidden;
   }

.video-container iframe,
.video-container object,
.video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   }

CSS zu Image hover effect 

/* Image hover effect */

.contentor {
    display: flex;
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 80vh;
}
.box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0,0,0,.1);
    line-height: 0;
}
.box > img {
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: .5s;
}
.box > span {
    font-size: 3.8vh;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
}
.box:hover { flex: 1 1 50%; }
.box:hover > img {
    width: 100%;
    height: 100%;
}

CSS für Spiegel Bild 

/* Spiegel Bild */

.meine {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.images-selector input {
    position: absolute;
    z-index: 10;
}
.images-selector input:checked + .img-card {
    filter: none;
    transform: scaleY(1);
}
.img-card {
    display: inline-block;
    width: 400px;
    height: 402px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 200ms ease-in;
    filter: grayscale(1) opacity(.8);
}
.img-card:hover {
    filter: grayscale(0) opacity(1);
}
.img-card::before,
.img-card::after {
    transform: scaleY(-1);
}
/*reflection*/
.img-card:hover::after {
    content: '';
    background-image: inherit;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    width: inherit;
    height: 50%;
    position: absolute;
    bottom: -25%;
}
/*fade reflection*/
.img-card:hover::before {
    content: '';
    width: inherit;
    height: 42%;
    position: absolute;
    bottom: -25%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .9),rgba(255, 255, 255, .5));
    z-index: 1;
}
.img1 {
    background-image: url('../Images/Backend/typo.jpg');
}

CSS für Animated Covers 

/* Animated Covers */
.contoni {
    width  : 100%;
    margin : 0 auto;
}

.contoni:after{
    clear   : both;
    display : table;
    content : '';
}

.bg-items {
    padding: 20px;
    width  : 240px;
    height : 160px;
    margin : 20px;
    background-color: white;
    float  : left;
    cursor : pointer;
    box-shadow : 3px 3px 5px 0px rgba(0,0,0,0.5);
}

.items {
    width  : 240px;
    height : 160px;
    position: relative;
    overflow: hidden;
    background-color: #102B46;
}

.details {
    background-color : rgba(0,0,0,0.5);
    width            : 220px;
    height           : 140px;
    padding          : 10px;
    top : 0;
    left: 0;
    font-family : georgia;
    color       : #fff;
    opacity : 0;
    transition : opacity .8s;
}

.details h3 {
    margin-bottom : 20px;
}

.details h6 {
    text-align : right;
    margin-top : 40px;
}

.details p {
    font-size : 14px;
    font-style: italic;
    text-align: center;
    line-height : 20px;
}

.items:hover .details {
    opacity : 1;
    transition : opacity .2s .3s;
}

.items div {
    position : absolute;
}

/* one */

.one {
    left   : 100%;
    bottom : 100%;
    width : inherit;
    height: inherit;
    background-color : #e43;
    transition   : all .3s;
}

.items:hover .one {
    transition   : all .3s;
    left   : 0;
    bottom : 0;
}

/* two */

.two {
    width : inherit;
    height: inherit;
    background-color : #e43;
    transition   : all .3s;
    left   : 0;
    bottom : 100%;
}

.items:hover .two {
    transform : rotate(180deg);
    left   : 0;
    bottom : 0;
    transition   : all .3s;
}

/* three */

.three {
    left : 0;
    top  : 0;
    width : inherit;
    height: inherit;
    background-color : #e43;
    transition   : all .3s;
    transform: scale(0,0);
}

.items:hover .three {
    left : 0;
    top  : 0;
    transform : scale(1,1);
    transition : all .3s;
}

/* four */

.four {
    width : inherit;
    height: inherit;
    background-color : #e43;
    transition   : all .3s;
    left : 0;
    top  : 0;
    transform: scale(0,0) rotate(0deg);
}

.items:hover .four {
    left : 0;
    top  : 0;
    transform: scale(1,1) rotate(1080deg);
    transition   : all .3s;
}

/* five */

.tl5 {
    border-top   : 161px solid #e43;
    border-right : 241px solid transparent;
    top  : -160px;
    left : -240px;
    transition   : all .3s;
}

.br5 {
    border-bottom : 161px solid #e43;
    border-left   : 241px solid transparent;
    bottom : -160px;
    right  : -240px;
    transition   : all .3s;
}

.items:hover .tl5 {
    top  : 0;
    left : 0;
    transition   : all .3s;
}

.items:hover .br5 {
    bottom : 0;
    right  : 0;
    transition   : all .3s;
}

/* six */

.tl6 {
    width  : 120px;
    height : 80px;
    background-color: #e43;
    top  : -80px;
    left : -240px;
    transition   : all .3s;
}

.tr6 {
    width  : 120px;
    height : 80px;
    background-color: #e43;
    top   : -80px;
    right : -240px;
    transition   : all .3s;
}

.br6 {
    width  : 120px;
    height : 80px;
    background-color: #e43;
    bottom: -80px;
    right : -240px;
    transition   : all .3s;
}

.bl6 {
    width  : 120px;
    height : 80px;
    background-color: #e43;
    bottom : -80px;
    left   : -240px;
    transition   : all .3s;
}

.items:hover .tl6 {
    top  : 0;
    left : 0;
    transition   : all .3s;
}

.items:hover .tr6 {
    top   : 0;
    right : 0;
    transition   : all .3s;
}

.items:hover .br6 {
    bottom : 0;
    right  : 0;
    transition   : all .3s;
}

.items:hover .bl6 {
    bottom : 0;
    left   : 0;
    transition   : all .3s;
}

/* seven */

.seven {
    width  : 240px;
    height : 160px;
    background-color : #e43;
    opacity : 0;
    transition   : all .3s;
}

.items:hover .seven {
    opacity    : 1;
    transition : all .3s;
}

/* eight */

.eight {
    top           : 30%;
    left          : 10%;
    border-right  :  100px solid transparent;
    border-bottom :  70px  solid #e43;
    border-left   :  100px solid transparent;
    transform: rotate(35deg) scale(0,0);
    transition : all .6s;
}

.eight:before {
    border-bottom: 80px solid #e43;
    border-left  : 30px solid transparent;
    border-right : 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -45px;
    left: -65px;
    display: block;
    content: '';
    transform: rotate(-35deg);
}

.eight:after {
    position: absolute;
    display: block;
    color: #e43;
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #e43;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
    content: '';
}

.items:hover .eight {
    transform: rotate(35deg) scale(3.5,3.5);
    transition : all .6s;

}

/* nine */

.nine {
    width : 0;
    height: 0;
    top   : 50%;
    left  : 50%;
    background-color: #e43;
    border-radius : 50%;
    transition : all .3s;
}

.items:hover .nine {
    width : 340px;
    height: 260px;
    top   : -50px;
    left  : -50px;
    transition : all .6s;

}

/* ten */

.ten {
    width  : inherit;
    height : 40px;
    background-color: #e43;
    left   : 100%;
}

.ten.i {
    top : 0;
    transition : all .2s;
}

.ten.ii {
    top : 40px;
    transition : all .4s;
}

.ten.iii {
    top : 80px;
    transition : all .6s;
}

.ten.iv {
    top : 120px;
    transition : all .8s;
}

.items:hover .i {
    left : 0;
    transition : all .2s;
}

.items:hover .ii {
    left : 0;
    transition : all .4s;
}

.items:hover .iii {
    left : 0;
    transition : all .6s;
}

.items:hover .iv {
    left : 0;
    transition : all .8s;
}

/* eleven */

.eleven {
    width  : inherit;
    height : 40px;
    background-color: #e43;
    transition : all .3s;
}

.eleven.i {
    top : 0;
    left : -100%;

}

.eleven.ii {
    top : 40px;
    left : 100%;
}

.eleven.iii {
    top : 80px;
    left : -100%;
}

.eleven.iv {
    left : 100%;
    top  : 120px;
}

.items:hover .eleven {
    left : 0;
    transition : all .4s ;
}

/* twelve */

.twelve {
    width  : inherit;
    height : 40px;
    background-color: #e43;
    transition : all .3s;
    top : -40px;
}

.twelve.iv {
    transition : all .1s;
}

.twelve.iii {
    transition : all .1s .1s;
}

.twelve.ii {
    transition : all .1s .2s;
}

.twelve.i {
    transition : all .1s .3s;
}

.items:hover .twelve.i {
    top : 120px;
    transition : all .2s;
}

.items:hover .twelve.ii {
    top : 80px;
    transition : all .2s .2s ;
}

.items:hover .twelve.iii {
    top : 40px;
    transition : all .2s .4s ;
}

.items:hover .twelve.iv {
    top : 0px;
    transition : all  .2s .6s;
}

/* thirteen */

.thirteen-r , .thirteen-l{
    width : 120px;
    height: inherit;
    background-color : #e43;
    top : 0;
    transition : all .3s;
}

.thirteen-r {
    left : 100%;
}

.thirteen-l {
    right : 100%;
}

.items:hover .thirteen-r {
    transition : all .3s;
    left : 0;
}

.items:hover .thirteen-l {
    transition : all .3s;
    right : 0;
}

/* fourteen */

.fourteen-r , .fourteen-l{
    width : 120px;
    height: inherit;
    background-color : #e43;
    top : 0;
    transition : all .3s;
}

.fourteen-r {
    left : 100%;
}

.fourteen-l {
    right : 100%;
}

.items:hover .fourteen-r {
    transition : all .3s;
    left : 50%;
}

.items:hover .fourteen-l {
    transition : all .3s;
    right : 50%;
}

/* fifteen */

.t {
    border-style : solid;
    border-width : 80px 120px 0 120px;
    border-color : #e43 transparent transparent transparent;
    transition   : all .3s;
    top : -80px;
}

.r {
    border-style : solid;
    border-width : 80px 120px 80px 0;
    border-color : transparent #e43 transparent transparent;
    right : -120px;
    transition   : all .3s;
}

.b {
    border-style : solid;
    border-width : 0 120px 80px 120px;
    border-color : transparent transparent #e43 transparent;
    bottom : -80px;
    transition   : all .3s;
}

.l {
    border-style : solid;
    border-width : 80px 0 80px 120px;
    border-color : transparent transparent transparent #e43;
    left : -120px;
    transition   : all .3s;
}


.items:hover .t {
    top : 0px;
    transition : all .3s;
}

.items:hover .r {
    right : 0px;
    transition : all .3s;
}

.items:hover .b {
    bottom : 0px;
    transition : all .3s;
}

.items:hover .l {
    left : 0px;
    transition : all .3s;
}

3D Thumb Image Hover Effect 

/* 3D Thumb Image Hover Effect */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.thumb {
    width: 500px;
    height: 400px;
    margin: 70px auto;
    perspective: 1000px;
}

.thumb a {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("https://images.unsplash.com/photo-1441966055611-30ea468880a2");
    background-size: 0, cover;
    transform-style: preserve-3d;
    transition: all 0.5s;
}

.thumb:hover a {
    transform: rotateX(80deg);
    transform-origin: bottom;
}
.thumb a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.thumb a span {
    color: white;
    text-transform: uppercase;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    font: bold 12px/36px "Open Sans";
    text-align: center;
    transform: rotateX(-89.99deg);
    transform-origin: top;
    z-index: 1;
}
.thumb a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    opacity: 0.15;
    transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    transform-origin: bottom;
}

.thumb:hover a:before {
    opacity: 1;
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    transform: rotateX(0) translateZ(-60px) scale(0.85);
}

3D Image Hover Effects | Pure CSS Direction-Aware Card Hover Effects 

/* CSS 3D Image Hover Effects | Pure CSS Direction-Aware Card Hover Effects */
* {
    margin: 0;
    padding: 0;
}
.containe {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    transform-style: preserve-3d;
    perspective: 500px;
    margin: auto;
}
.containe .box {
    position: relative;
    width: 275px;
    height: 275px;
    background: #000;
    transition: 0.5s;
    transform-style: preserve-3d;
    overflow: hidden;
    margin-right: 15px;
    margin-top: 45px;
}
.containe:hover .box {
    transform: rotateY(25deg);
}
.containe .box:hover ~ .box {
    transform: rotateY(-25deg);
}
.containe .box:hover {
    transform: rotateY(0deg) scale(1.25);
    z-index: 1;
    box-shadow: 0 25px 40px rgba(0,0,0,0.5);
}
.containe .box .imgBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.containe .box .imgBx:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,#f00,#000);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
}
.containe .box:hover .imgBx:before {
    opacity: 1;
}
.containe .box .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.containe .box .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    padding: 20px;
    align-items: flex-end;
    box-sizing: border-box;
}
.containe .box .content h2 {
    color: #fff;
    transition: 0.5s;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 20px;
    transform: translateY(200px);
    transition-delay: 0.3s;
}
.containe .box:hover .content h2 {
    transform: translateY(0px);
}
.containe .box .content p {
    color: #fff;
    transition: 0.5s;
    font-size: 14px;
    transform: translateY(200px);
    transition-delay: 0.4s;
}
.containe .box:hover .content p {
    transform: translateY(0px);
}