How to make Hover Loop with background-image in CSS

up vote
0
down vote

favorite

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>

edited Nov 12 at 10:51

asked Nov 10 at 17:53

Фархад хан

119

add a comment |

up vote
0
down vote

favorite

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>

edited Nov 12 at 10:51

asked Nov 10 at 17:53

Фархад хан

119

add a comment |

up vote
0
down vote

favorite

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>

edited Nov 12 at 10:51

asked Nov 10 at 17:53

Фархад хан

119

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>

#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>

#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>

css

edited Nov 12 at 10:51

asked Nov 10 at 17:53

Фархад хан

119

edited Nov 12 at 10:51

asked Nov 10 at 17:53

Фархад хан

119

edited Nov 12 at 10:51

asked Nov 10 at 17:53

Фархад хан

119

asked Nov 10 at 17:53

Фархад хан

119

asked Nov 10 at 17:53

Фархад хан

119

add a comment |

2 Answers
2

active

oldest

votes

up vote
3
down vote

accepted

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>

edited Nov 11 at 13:47

answered Nov 10 at 18:00

Fox

394219

1

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
Nov 11 at 22:37

add a comment |

up vote
1
down vote

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>

edited Nov 11 at 0:48

answered Nov 10 at 19:00

AllirionX

1865

Thank you so much AllirionX i will test it )
– Фархад хан
Nov 10 at 19:24

AllirionX Float with display:inline-block; is not sopported.
– Фархад хан
Nov 10 at 19:50

I edited the float property as it was useless, but that's not the important part I guess. The idea is to display a fake background under all the .col-xs-6 div, depending on which .col-xs-6 div you hover. When you hover, the .col-xs-6 divs' background is removed, and the next .wrapper-background is displayed. It allows you, for each block to set a different background-color or image in the .wrapper-background. It should work with more than 2 columns and rows.
– AllirionX
Nov 10 at 22:46

Yes i agree, did you check the example at >>> www.extyl-pro.ru ? I am dreaming this kind of Header for my new Project. It has auto loop too and background multiple slides with every column.
– Фархад хан
Nov 10 at 22:50

1

Edited my answer again : you will need to update your html code though and add a <div class="wrapper-background"></div> after each ".et_pb_column" div. If you cannot update the html code, then I am out of option. Also, positioning properties in the css are quite important, don't remove position:relative and z-index properties.
– AllirionX
Nov 11 at 0:50

|
show 21 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241810%2fhow-to-make-hover-loop-with-background-image-in-css%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
3
down vote

accepted

#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>

edited Nov 11 at 13:47

answered Nov 10 at 18:00

Fox

394219

1

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
Nov 11 at 22:37

add a comment |

up vote
3
down vote

accepted

#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>

edited Nov 11 at 13:47

answered Nov 10 at 18:00

Fox

394219

1

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
Nov 11 at 22:37

add a comment |

up vote
3
down vote

accepted

#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>

edited Nov 11 at 13:47

answered Nov 10 at 18:00

Fox

394219

#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>

#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>

#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>

edited Nov 11 at 13:47

answered Nov 10 at 18:00

Fox

394219

edited Nov 11 at 13:47

answered Nov 10 at 18:00

Fox

394219

answered Nov 10 at 18:00

Fox

394219

answered Nov 10 at 18:00

Fox

394219

1

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
Nov 11 at 22:37

add a comment |

1

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
Nov 11 at 22:37

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
Nov 11 at 22:37

add a comment |

up vote
1
down vote

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>

edited Nov 11 at 0:48

answered Nov 10 at 19:00

AllirionX

1865

Thank you so much AllirionX i will test it )
– Фархад хан
Nov 10 at 19:24

AllirionX Float with display:inline-block; is not sopported.
– Фархад хан
Nov 10 at 19:50

I edited the float property as it was useless, but that's not the important part I guess. The idea is to display a fake background under all the .col-xs-6 div, depending on which .col-xs-6 div you hover. When you hover, the .col-xs-6 divs' background is removed, and the next .wrapper-background is displayed. It allows you, for each block to set a different background-color or image in the .wrapper-background. It should work with more than 2 columns and rows.
– AllirionX
Nov 10 at 22:46

Yes i agree, did you check the example at >>> www.extyl-pro.ru ? I am dreaming this kind of Header for my new Project. It has auto loop too and background multiple slides with every column.
– Фархад хан
Nov 10 at 22:50

1

Edited my answer again : you will need to update your html code though and add a <div class="wrapper-background"></div> after each ".et_pb_column" div. If you cannot update the html code, then I am out of option. Also, positioning properties in the css are quite important, don't remove position:relative and z-index properties.
– AllirionX
Nov 11 at 0:50

|
show 21 more comments

up vote
1
down vote

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>

edited Nov 11 at 0:48

answered Nov 10 at 19:00

AllirionX

1865

Thank you so much AllirionX i will test it )
– Фархад хан
Nov 10 at 19:24

AllirionX Float with display:inline-block; is not sopported.
– Фархад хан
Nov 10 at 19:50

I edited the float property as it was useless, but that's not the important part I guess. The idea is to display a fake background under all the .col-xs-6 div, depending on which .col-xs-6 div you hover. When you hover, the .col-xs-6 divs' background is removed, and the next .wrapper-background is displayed. It allows you, for each block to set a different background-color or image in the .wrapper-background. It should work with more than 2 columns and rows.
– AllirionX
Nov 10 at 22:46

Yes i agree, did you check the example at >>> www.extyl-pro.ru ? I am dreaming this kind of Header for my new Project. It has auto loop too and background multiple slides with every column.
– Фархад хан
Nov 10 at 22:50

1

Edited my answer again : you will need to update your html code though and add a <div class="wrapper-background"></div> after each ".et_pb_column" div. If you cannot update the html code, then I am out of option. Also, positioning properties in the css are quite important, don't remove position:relative and z-index properties.
– AllirionX
Nov 11 at 0:50

|
show 21 more comments

up vote
1
down vote

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>

edited Nov 11 at 0:48

answered Nov 10 at 19:00

AllirionX

1865

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>

.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>

.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>

#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>

#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>

edited Nov 11 at 0:48

answered Nov 10 at 19:00

AllirionX

1865

edited Nov 11 at 0:48

answered Nov 10 at 19:00

AllirionX

1865

answered Nov 10 at 19:00

AllirionX

1865

answered Nov 10 at 19:00

AllirionX

1865

Thank you so much AllirionX i will test it )
– Фархад хан
Nov 10 at 19:24

AllirionX Float with display:inline-block; is not sopported.
– Фархад хан
Nov 10 at 19:50

I edited the float property as it was useless, but that's not the important part I guess. The idea is to display a fake background under all the .col-xs-6 div, depending on which .col-xs-6 div you hover. When you hover, the .col-xs-6 divs' background is removed, and the next .wrapper-background is displayed. It allows you, for each block to set a different background-color or image in the .wrapper-background. It should work with more than 2 columns and rows.
– AllirionX
Nov 10 at 22:46

Yes i agree, did you check the example at >>> www.extyl-pro.ru ? I am dreaming this kind of Header for my new Project. It has auto loop too and background multiple slides with every column.
– Фархад хан
Nov 10 at 22:50

1

Edited my answer again : you will need to update your html code though and add a <div class="wrapper-background"></div> after each ".et_pb_column" div. If you cannot update the html code, then I am out of option. Also, positioning properties in the css are quite important, don't remove position:relative and z-index properties.
– AllirionX
Nov 11 at 0:50

|
show 21 more comments

Thank you so much AllirionX i will test it )
– Фархад хан
Nov 10 at 19:24

AllirionX Float with display:inline-block; is not sopported.
– Фархад хан
Nov 10 at 19:50

I edited the float property as it was useless, but that's not the important part I guess. The idea is to display a fake background under all the .col-xs-6 div, depending on which .col-xs-6 div you hover. When you hover, the .col-xs-6 divs' background is removed, and the next .wrapper-background is displayed. It allows you, for each block to set a different background-color or image in the .wrapper-background. It should work with more than 2 columns and rows.
– AllirionX
Nov 10 at 22:46

Yes i agree, did you check the example at >>> www.extyl-pro.ru ? I am dreaming this kind of Header for my new Project. It has auto loop too and background multiple slides with every column.
– Фархад хан
Nov 10 at 22:50

1

Edited my answer again : you will need to update your html code though and add a <div class="wrapper-background"></div> after each ".et_pb_column" div. If you cannot update the html code, then I am out of option. Also, positioning properties in the css are quite important, don't remove position:relative and z-index properties.
– AllirionX
Nov 11 at 0:50

Thank you so much AllirionX i will test it )
– Фархад хан
Nov 10 at 19:24

AllirionX Float with display:inline-block; is not sopported.
– Фархад хан
Nov 10 at 19:50

I edited the float property as it was useless, but that's not the important part I guess. The idea is to display a fake background under all the .col-xs-6 div, depending on which .col-xs-6 div you hover. When you hover, the .col-xs-6 divs' background is removed, and the next .wrapper-background is displayed. It allows you, for each block to set a different background-color or image in the .wrapper-background. It should work with more than 2 columns and rows.
– AllirionX
Nov 10 at 22:46

Yes i agree, did you check the example at >>> www.extyl-pro.ru ? I am dreaming this kind of Header for my new Project. It has auto loop too and background multiple slides with every column.
– Фархад хан
Nov 10 at 22:50

Edited my answer again : you will need to update your html code though and add a <div class="wrapper-background"></div> after each ".et_pb_column" div. If you cannot update the html code, then I am out of option. Also, positioning properties in the css are quite important, don't remove position:relative and z-index properties.
– AllirionX
Nov 11 at 0:50

|
show 21 more comments

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky