I want to make an special Hover effect loop in the website full width header.
I have 8 Columns with text modules in the Header and column 1 have background image. so i want the background image fade out in the header and cover all other columns with background-image.
How to do it?
The CSS snippet and HTML code is Copied from the answer to make it easy to understand the main point of the question with details.
The example of what I want to achieve
#main-row {
width:500px;
position:relative;
display:flex;
}
.et_pb_column {
display:inline-block;
width:25%;
}
.et_pb_module {
width:calc(100% - 30px);
padding:0 14px;
border:1px solid black;
background:pink;
position:relative;
z-index:10;
height:50px;
}
.wrapper-background {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
transition: background 3s;
}
#main-row:hover .et_pb_module {
background:none;
}
#main-row:hover .et_pb_module:hover {
background:red;
}
#main-row:hover .et_pb_column_0 .et_pb_module.et_pb_text_0:hover ~ .wrapper-background {
background:cyan;
z-index:0;
}
#main-row:hover .et_pb_column_0 .et_pb_module.et_pb_text_1:hover ~ .wrapper-background {
background:lightblue;
z-index:0;
}
#main-row:hover .et_pb_column_1 .et_pb_module.et_pb_text_2:hover ~ .wrapper-background {
background:darkgray;
z-index:0;
}
#main-row:hover .et_pb_column_1 .et_pb_module.et_pb_text_3:hover ~ .wrapper-background {
background:blue;
z-index:0;
}
#main-row:hover .et_pb_column_2 .et_pb_module.et_pb_text_4:hover ~ .wrapper-background {
background:gray;
z-index:0;
}
#main-row:hover .et_pb_column_2 .et_pb_module.et_pb_text_5:hover ~ .wrapper-background {
background:green;
z-index:0;
}
#main-row:hover .et_pb_column_3 .et_pb_module.et_pb_text_6:hover ~ .wrapper-background {
background:yellow;
z-index:0;
}
#main-row:hover .et_pb_column_3 .et_pb_module.et_pb_text_7:hover ~ .wrapper-background {
background:orange;
z-index:0;
}
<!DOCTYPE html>
<html>
<body>
<div id="main-row" class="et_pb_row et_pb_row_0 main-row et_pb_row_4col">
<div class="et_pb_column et_pb_column_1_4 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text_0 column-1 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div> <!-- .et_pb_text -->
<div class="wrapper-background"></div>
<div class="et_pb_module et_pb_text et_pb_text_1 column-2 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_4 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text_2 column-3 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
<div class="et_pb_module et_pb_text et_pb_text_3 column-4 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
</div> <!-- .et_pb_column -->
<div class="et_pb_column et_pb_column_1_4 et_pb_column_2 et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text_4 column-5 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
<div class="et_pb_module et_pb_text et_pb_text_5 column-6 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_4 et_pb_column_3 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_module et_pb_text et_pb_text_6 column-7 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
<div class="et_pb_module et_pb_text et_pb_text_7 column-8 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
</div> <!-- .et_pb_column -->
</div>
</div>
</body>
</html>
You can use CSS3 animation. CSS animation docs Main things: your main row must have transparent background. Must have background-image property, but with image contains only transparent layer, without it, it won't work. Plus you must have the same html architecture.
#main-row {
width: 400px;
height: 200px;
position:relative;
display:flex;
background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}
[class^="et_pb_column_"] {
position: absolute;
height: 100px;
width: 100px;
z-index: 1;
}
.et_pb_column_1 {
top: 8px;
left: 8px;
}
.et_pb_column_2 {
top: 8px;
left: 125px;
}
.et_pb_column_3 {
top: 8px;
left: 242px;
}
.et_pb_column_4 {
top: 8px;
left: 359px;
}
.et_pb_column_5 {
top: 125px;
left: 8px;
}
.et_pb_column_6 {
top: 125px;
left: 125px;
}
.et_pb_column_7 {
top: 125px;
left: 242px;
}
.et_pb_column_8 {
top: 125px;
left: 359px;
}
.et_pb_column_1:hover ~ #main-row {
-webkit-animation-name: background-col-1;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.et_pb_column_2:hover ~ #main-row {
-webkit-animation-name: background-col-2;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.et_pb_column_3:hover ~ #main-row {
-webkit-animation-name: background-col-3;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.et_pb_column_4:hover ~ #main-row {
-webkit-animation-name: background-col-4;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.et_pb_column_5:hover ~ #main-row {
-webkit-animation-name: background-col-5;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.et_pb_column_6:hover ~ #main-row {
-webkit-animation-name: background-col-6;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.et_pb_column_7:hover ~ #main-row {
-webkit-animation-name: background-col-7;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.et_pb_column_8:hover ~ #main-row {
-webkit-animation-name: background-col-8;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes background-col-1 {
0% {
background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}
100% {
background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
}
}
#-webkit-keyframes background-col-2 {
0% {
background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}
100% {
background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
}
}
#-webkit-keyframes background-col-3 {
0% {
background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}
100% {
background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
}
}
#-webkit-keyframes background-col-4 {
0% {
background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}
100% {
background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
}
}
#-webkit-keyframes background-col-5 {
0% {
background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}
100% {
background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
}
}
#-webkit-keyframes background-col-6 {
0% {
background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}
100% {
background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
}
}
#-webkit-keyframes background-col-7 {
0% {
background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}
100% {
background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
}
}
#-webkit-keyframes background-col-8 {
0% {
background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}
100% {
background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
}
}
<!DOCTYPE html>
<html>
<body>
<div id="main-section" class="et_pb_section et_pb_section_0 et_section_regular">
<div class="et_pb_column_1"><p> SOME TEXT </p></div>
<div class="et_pb_column_2">Your content goes here. Edit or remove this text inline or in the module Content settings.</div>
<div class="et_pb_column_3"><p> SOME TEXT </p></div>
<div class="et_pb_column_4">Your content goes here. Edit or remove this text inline or in the module Content settings.</div>
<div class="et_pb_column_5"><p> SOME TEXT </p></div>
<div class="et_pb_column_6"><p> SOME TEXT </p></div>
<div class="et_pb_column_7">Your content goes here. Edit or remove this text inline or in the module Content settings.</div>
<div class="et_pb_column_8"><p> SOME TEXT </p></div>
<div id="main-row" class="et_pb_row et_pb_row_0 et_pb_row_4col"></div>
</div>
</body>
</html>
In css, you cannot change a parent property from one of its child.
But you can create a child elemnt with the dimensions of the wrapper and update the background when the mouse is hover it.
In the example below, dimensions, transitions and even background colors can be adjusted.
.wrapper {
width:500px;
position:relative;
}
.row {
display: flex;
width:100%;
margin:0px;
}
.col-xs-3 {
padding:0 14px;
border:1px solid black;
display:inline-block;
width:calc(25% - 30px);
height:50px;
background:pink;
z-index:10;
}
.wrapper-background {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index :0;
transition: background 3s;
}
.wrapper:hover .col-xs-3 {
background:none;
}
.wrapper:hover .col-xs-3:hover {
background:red;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(1):hover ~ .wrapper-background {
background:blue;
z-index:0;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(3):hover ~ .wrapper-background {
background:darkgray;
z-index:0;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(5):hover ~ .wrapper-background {
background:yellow;
z-index:0;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(7):hover ~ .wrapper-background {
background:orange;
z-index:0;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(1):hover ~ .wrapper-background {
background:gray;
z-index:0;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(3):hover ~ .wrapper-background {
background:black;
z-index:0;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(5):hover ~ .wrapper-background {
background:green;
z-index:0;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(7):hover ~ .wrapper-background {
background:lightblue;
z-index:0;
}
<div class="wrapper">
<div class="row">
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
</div>
</div>
Adapted to your html, ids and class :
You need to add a after each et_pb_module
#main-row {
width:500px;
position:relative;
display:flex;
}
.et_pb_column {
display:inline-block;
width:25%;
}
.et_pb_module {
width:calc(100% - 30px);
padding:0 14px;
border:1px solid black;
background:pink;
position:relative;
z-index:10;
height:50px;
}
.wrapper-background {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
transition: background 3s;
}
#main-row:hover .et_pb_module {
background:none;
}
#main-row:hover .et_pb_module:hover {
background:red;
}
#main-row:hover .et_pb_column_0 .et_pb_module.et_pb_text_0:hover ~ .wrapper-background {
background:cyan;
z-index:0;
}
#main-row:hover .et_pb_column_0 .et_pb_module.et_pb_text_1:hover ~ .wrapper-background {
background:lightblue;
z-index:0;
}
#main-row:hover .et_pb_column_1 .et_pb_module.et_pb_text_2:hover ~ .wrapper-background {
background:darkgray;
z-index:0;
}
#main-row:hover .et_pb_column_1 .et_pb_module.et_pb_text_3:hover ~ .wrapper-background {
background:blue;
z-index:0;
}
#main-row:hover .et_pb_column_2 .et_pb_module.et_pb_text_4:hover ~ .wrapper-background {
background:gray;
z-index:0;
}
#main-row:hover .et_pb_column_2 .et_pb_module.et_pb_text_5:hover ~ .wrapper-background {
background:green;
z-index:0;
}
#main-row:hover .et_pb_column_3 .et_pb_module.et_pb_text_6:hover ~ .wrapper-background {
background:yellow;
z-index:0;
}
#main-row:hover .et_pb_column_3 .et_pb_module.et_pb_text_7:hover ~ .wrapper-background {
background:orange;
z-index:0;
}
<div id="main-row" class="et_pb_row et_pb_row_0 main-row et_pb_row_4col">
<div class="et_pb_column et_pb_column_1_4 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text_0 column-1 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div> <!-- .et_pb_text -->
<div class="wrapper-background"></div>
<div class="et_pb_module et_pb_text et_pb_text_1 column-2 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_4 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text_2 column-3 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
<div class="et_pb_module et_pb_text et_pb_text_3 column-4 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
</div> <!-- .et_pb_column -->
<div class="et_pb_column et_pb_column_1_4 et_pb_column_2 et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text_4 column-5 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
<div class="et_pb_module et_pb_text et_pb_text_5 column-6 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_4 et_pb_column_3 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_module et_pb_text et_pb_text_6 column-7 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
<div class="et_pb_module et_pb_text et_pb_text_7 column-8 et_hover_enabled et_pb_bg_layout_light et_pb_text_align_left">
</div>
<div class="wrapper-background"></div>
</div> <!-- .et_pb_column -->
</div>
Related
I am trying to position a div in a corner of my screen so that I can resize it to cover the screen.
Problem is, when I resize it the div moves as you can see in the snippet below. I tried to apply the effect on an pseudo-element but it did not help. Any idea how I can resize an item without it moving ?
Thank you for your help.
$('button').click(function(){
$(this).closest('div').find('.cover').toggleClass('active');
console.log("test");
})
.main{
display:flex;
justify-content:space-around;
}
.item {
width:350px;
height:350px;
background-color:teal;
position:relative;
overflow:hidden;
}
.item .cover {
transition:all .5s linear;
width:20px;
height:20px;
background-color:orange;
position:absolute;
inset:-10px -10px auto auto;
border-radius:50%;
}
.item.no-pseudo .cover.active {
width:200%;
height:200%;
}
}
button{
margin-top:1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="container">
<div class="item no-pseudo">
<div class="cover"></div>
</div>
<button class="no-pseudo">Click to toggle effect on element</button>
</div>
</div>
You can use transform:scale(x) instead, by default, transform-origin is done from the center of the element.
$('button').click(function(){
$(this).closest('div').find('.cover').toggleClass('active');
console.log("test");
})
.main{
display:flex;
justify-content:space-around;
}
.item {
width:350px;
height:350px;
background-color:teal;
position:relative;
overflow:hidden;
}
.item .cover {
transition:all .5s linear;
width:20px;
height:20px;
background-color:orange;
position:absolute;
inset:-10px -10px auto auto;
border-radius:50%;
}
.item.no-pseudo .cover.active {
transform:scale(50);
}
}
button{
margin-top:1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="container">
<div class="item no-pseudo">
<div class="cover"></div>
</div>
<button class="no-pseudo">Click to toggle effect on element</button>
</div>
</div>
Use scale instead of width and height.
$('button').click(function(){
$(this).closest('div').find('.cover').toggleClass('active');
console.log("test");
})
.main{
display:flex;
justify-content:space-around;
}
.item {
width:350px;
height:350px;
background-color:teal;
position:relative;
overflow:hidden;
}
.item .cover {
transition:all .5s linear;
width:20px;
height:20px;
background-color:orange;
position:absolute;
border-radius:50%;
}
.item.no-pseudo .cover.active {
transform:scale(20);
}
}
button{
margin-top:1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="container">
<div class="item no-pseudo">
<div class="cover"></div>
</div>
<button class="no-pseudo">Click to toggle effect on element</button>
</div>
</div>
I have The following animated background, currently displayed on the entire screen, I need you to only visualize in a block (<div class="c"> </ div>)
body {
margin:0;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:fixed;
right:-50%;
top:0;
z-index:-1;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
#keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
.c {margin:0 auto;}
<div class="c">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Only here animation</h1>
</div>
</div> <!-- /end animation -->
<div class="footer">Here without animation</div>
I always see on the whole screen, some suggestion to be able to see the animation only in a block (div)
Add the following css:
.c { height: 80px; }
.bg { height: 80px; }
Note: Change the sizes according to your taste.(height)
example:
body {
margin:0;
}
.c {
height: 80px;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:fixed;
right:-50%;
top:0;
z-index:-1;
height: 80px;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
#keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
<div class="c">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Only here animation</h1>
</div>
</div> <!-- /end animation -->
<div class="footer">Here without animation</div>
Change '.bg' position to relative. Add a "container" div as the parent. The "container" should have the relative position. The footer is going to have the "absolute" position.
Take a look
body {
margin:0;
height: 100%;
position: relative;
}
.footer{
position:relative;
bottom:0;
height:50px;
background-color: #f7f7f7;
width: 100%;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:absolute;
right:-50%;
top:0;
z-index:-1;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
#keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
.c {margin:0 auto;}
<div class="container">
<div class="c">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Only here animation</h1>
</div>
</div> <!-- /end animation -->
<div class="footer">Here without animation</div>
</div>
I don't understand why rotateX and rotateY animation in 2D transform will move so weird like demo
who can explain it, thanks
the demo code is
pug html
.ar
.ar2
css
body { background: black;}
#keyframes wing3{
0%{transform: rotateX(50deg)}
50%{transform: rotateX(70deg)}
100%{transform: rotateX(50deg)}
}
#keyframes wing4{
0%{transform: rotateY(50deg)}
50%{transform: rotateY(70deg)}
100%{transform: rotateY(50deg)}
}
.ar {
width: 40px; height: 5px; background: #fff;
animation: wing3 1.2s infinite;
}
.ar2 {
width: 40px; height: 5px; background: #fff;
animation: wing4 1.2s infinite;
}
It's not werid but logical. You are rotating on the X/Y axis so from our perspective your don't see any rotation but only a size changing.
Here is a classic rotation done the on Z axis:
.b {
width:100px;
height:10px;
background:red;
margin:50px;
animation:change 5s infinite linear;
}
#keyframes change{
to {
transform:rotate(90deg);
}
}
<div class="b">
</div>
Our element is rotating at the center going from 0 to 90deg. Now imagine your are looking to this rotation from the bottom. You will simply see a reduced width.
Here is the different frames:
.b {
width:100px;
height:10px;
display:inline-block;
background:red;
margin:50px 10px;;
}
body {
margin:0;
font-size:0;
}
<div class="b">
</div>
<div class="b" style="transform:rotate(40deg)">
</div>
<div class="b" style="transform:rotate(60deg)">
</div>
<div class="b" style="transform:rotate(80deg)">
</div>
<div class="b" style="transform:rotate(90deg)">
</div>
Now let's look at this from the bottom:
.b {
width:100px;
height:10px;
display:inline-block;
background:red;
margin:50px 5px;
}
.a {
width:100px;
height:10px;
display:inline-block;
background:blue;
margin:50px 10px;
}
body {
margin:0;
font-size:0;
}
<div class="b">
</div>
<div class="b" style="transform:rotate(40deg)">
</div>
<div class="b" style="transform:rotate(60deg)">
</div>
<div class="b" style="transform:rotate(80deg)">
</div>
<div class="b" style="transform:rotate(90deg)">
</div>
<br>
<div class="a">
</div>
<div class="a" style="transform:rotateY(40deg)">
</div>
<div class="a" style="transform:rotateY(60deg)">
</div>
<div class="a" style="transform:rotateY(80deg)">
</div>
<div class="a" style="transform:rotateY(90deg)">
</div>
So the blue part is our perception of the Z rotation if we look at it from another direction which is equivalent to an Y rotation. And you also have the same effect using a scale transformation since this one will do the same thing from our perception:
.b {
width:100px;
height:10px;
display:inline-block;
background:red;
margin:50px 5px;
animation:rotate 4s infinite linear;
}
.a {
width:100px;
height:10px;
display:inline-block;
background:blue;
margin:50px 10px;
animation:scale 5s infinite linear;
}
#keyframes rotate{
to {
transform:rotateY(90deg);
}
}
#keyframes scale{
to {
transform:scaleX(0);
}
}
body {
margin:0;
font-size:0;
}
<div class="b">
</div>
<br>
<div class="a">
</div>
In order to see this differently, you can add some perspective and you will make the rotation more close to what we see in a real world:
.b {
width:100px;
height:10px;
display:inline-block;
background:red;
margin:50px 5px;
animation:rotate-1 4s infinite linear;
}
.a {
width:100px;
height:10px;
display:inline-block;
background:blue;
margin:50px 10px;
animation:rotate-2 5s infinite linear;
}
#keyframes rotate-1{
to {
transform:perspective(45px) rotateY(180deg);
}
}
#keyframes rotate-2{
to {
transform:perspective(45px) rotateX(180deg);
}
}
body {
margin:0;
font-size:0;
}
<div class="b">
</div>
<br>
<div class="a">
</div>
I'm trying to have an image zoom. I have it working but ran into a strange situation I can't explain. In trying to cut down the amount of div, etc elements I created two sections below one use a carousel the other just plain div.
In the first section.. The image stay within it boundary and zoom in nicely..Great!!!
In the second section the image expands out side of it boundary..
It seem using the carousel keeps the image in bound.
<div class="w3-container w3-padding-10" >
<div class="w3-row">
<div class="container" style="background-color:black; width:100%; margin:0">
<div class="carousel slide" data-ride="carousel" style="background-color:black; width:100%; margin:0">
<div class="carousel-inner">
<div class="item active">
<img class="imgx" src="w3images/img1.jpg" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section 2 -->
<section style="background-color:red; no-repeat;background-size: cover;">
<div class="w3-container w3-padding-10" >
<div class="w3-row">
<div >
<img class="imgx" src="w3images/img1.jpg" style="width:100%;">
</div>
</div>
</div>
</section>
stylesheets;
<style>
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from
{
-webkit-transform: scale(1,1);
}
to
{
-webkit-transform: scale(1.5,1.5);
}
}
/* Standard syntax */
#keyframes zoom {
from
{
transform: scale(1,1);
}
to
{
transform: scale(1.5,1.5);
}
}
.imgx {
-webkit-animation: zoom 10s;
-webkit-animation-fill-mode: forwards;
animation: zoom 30s;
animation-fill-mode: forwards;
}
</style>
Any ideas
You need to set a fix width to your parent divs when the image zoom it:
.carousel-inner .item{
width:100px;
height:100px;
overflow:hidden;
}
.w3-row>div{
width:100px;
height:100px;
overflow:hidden;
}
.big-container {
width: 500px;
}
.carousel-inner .item{
width:100px;
height:100px;
overflow:hidden;
}
.w3-row>div{
width:100px;
height:100px;
overflow:hidden;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(1, 1);
}
to {
-webkit-transform: scale(2.5, 2.5);
}
}
/* Standard syntax */
#keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(2.5, 2.5);
}
}
.imgx {
-webkit-animation: zoom 10s;
-webkit-animation-fill-mode: forwards;
animation: zoom 30s;
animation-fill-mode: forwards;
}
<div class="big-container">
<div class="w3-container w3-padding-10">
<div class="w3-row">
<div class="container" style="background-color:black; width:100%; margin:0">
<div class="carousel slide" data-ride="carousel" style="background-color:black; width:100%; margin:0">
<div class="carousel-inner">
<div class="item active">
<img class="imgx" src="https://dummyimage.com/100x100/ed5fed/ffffff" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section 2 -->
<section style="background-color:red; no-repeat;background-size: cover;">
<div class="w3-container w3-padding-10">
<div class="w3-row">
<div>
<img class="imgx" src="https://dummyimage.com/100x100/ed5fed/ffffff" style="width:100%;">
</div>
</div>
</div>
</section>
<div>
$(document).ready(function()
{
$("[name='oimg']").mousemove(function(e)
{
$(".image").css({
display:'block',
left: e.pageX + 5,
top: e.pageY + 5
});
var src = $(this).attr("src");
$(".image").attr("src",src);
});
$("[name='oimg']").mouseout(function(e)
{
$(".image").css("display","none");
});
});
.image
{
display:none;
position: absolute;
width: 20%;
height: 50%;
border-style:solid;
border-color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" class="image">
<div>
<img name="oimg" src="https://www.microsoft.com/en-us/CMSImages/WindowsHello_Poster_1920-1600x300-hello.png?version=0d8f51c7-ef87-b0af-8f26-453fb40b4b7d" style="width:100px; background-color:#960;padding:20px;">
<img name="oimg" src="https://static1.squarespace.com/static/528fc8ffe4b070ad8ee97493/t/558c019ae4b08aeb04726a36/1435238813669/Ladybug+Saying+Hello%21" style="width:100px; background-color:#39F; padding:20px;">
</div>
is this what u want ?
Hi guys I've got a problem with some div with width:auto.
Here's the HTML:
<div class="greenMenu">
<div class="btn">
<img src="img/image.png" width="57" height="46" />
<div class="area">
<div class="txt">A Lorem ipsum</div>
</div>
</div>
<div class="btn">
<img src="img/image.png" width="57" height="46" />
<div class="area">
<div class="txt">A Lorem ipsum</div>
</div>
</div>
</div>
and the CSS:
.greenMenu {
position:absolute;
top:83px;
left:220px;
width:auto;
height:47px;
background:url(../img/prod-uova-ripMenu.png) left top repeat;
}
.greenMenu .btn {
background:#090;
float:left;
margin-top:1px;
margin-left:6px;
*display:inline;
_display:inline;
width:auto;
height:43px;
position:relative;
}
.greenMenu .btn img {
border:none;
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.greenMenu .btn .area {
background:#53882d;
width:auto;
height:32px;
position:absolute;
top:5px;
left:0px;
z-index:1;
}
.greenMenu .btn .area .txt {
float:left;
margin:7px 13px 0 60px;
}
The problem is: the greenMenu cannot expand its width and in the same time div.btn width is 0.
Don't use following code there:
position: absolute;