Forum - Hover-Effekt für einen Forum-Code der Iconbar

<style>
.content_hov {
  display:inline-block;
}
.pic_hov {
  background-image: url("https://files.homepagemodules.de/b104774/pictures_u610_zHWgswMD.jpg");
  background-size: cover;
  box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
} 
.pichover_hov {
  padding: 10px 5px 10px 10px;
  width: 329px; 
  background: #ffdfcb; 
  opacity: 0; 
}
.pichover_hov:hover {
  transition-duration: 1s; 
  opacity: 0.9;
  cursor:pointer;
}
.text_hov {
  padding-right:10px;  
  height: 347px;
  font-family: Georgia;
  font-size: 13px;
  line-height: 1.4;
  text-align: justify;
  color: #192649;
  overflow-y: scroll;
  scrollbar-width: thin;
}
</style>
 
<div class="content_hov">
  <div class="pic_hov">
    <div class="pichover_hov">
      <div class="text_hov">
		
       Text Text Text Text Text 
          
      </div>
    </div>
  </div>
</div>
 

[hover={{bild}}]
 

...
 

[/hover]
 

<div class="content_hov"><div class="pic_hov" style="background-image: url('{{bild}}');"><div class="pichover_hov"><div class="text_hov">
 

 ... 
 

</div></div></div></div>
 

Reihenfolge: 0
 

//files.homepagemodules.de/b214495/a_560_5a77b5dc.png
 

.content_hov {
  display:inline-block;
}
.pic_hov {
  background-size: cover;
  box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
} 
.pichover_hov {
  padding: 10px 5px 10px 10px;
  width: 329px; 
  background: #ffdfcb; 
  opacity: 0; 
}
.pichover_hov:hover {
  transition-duration: 1s; 
  opacity: 0.9;
  cursor:pointer;
}
.text_hov {
  padding-right:10px;  
  height: 347px;
  font-family: Georgia;
  font-size: 13px;
  line-height: 1.4;
  text-align: justify;
  color: #192649;
  overflow-y: scroll;
  scrollbar-width: thin;
}
 

<div onclick="xob_insert('[hover=//files.homepagemodules.de/b104774/pictures_u610_zHWgswMD.jpg]','Text Text \nText Text\n\n[/hover]')" class="xob_icon_cont" id="icon_6101"><img alt="Hover" title="Hover-Effekt einfügen" class="xob_icon" src="//files.homepagemodules.de/b214495/a_560_5a77b5dc.png"></div>
 

<style>
.content_hov {
  display:inline-block;
}
.pic_hov {
  background-image: url("https://files.homepagemodules.de/b104774/pictures_u610_zHWgswMD.jpg");
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center;  
  box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
} 
.pichover_hov {
  padding: 10px 5px 10px 10px;
  width: 330px; 
  background: #eeeeee; 
  opacity: 0; 
}
.pichover_hov:hover {
  transition-duration: 1s; 
  opacity: 0.9;
  cursor:pointer;
}
.text_hov {
  padding-right:10px;  
  height: 350px;
  font-family: Georgia;
  font-size: 13px;
  line-height: 1.4;
  text-align: justify;
  color: #192649;
  overflow-y: auto;
  scrollbar-width: thin;
}
</style>
 
<div class="content_hov">
  <div class="pic_hov">
    <div class="pichover_hov">
      <div class="text_hov">
		
       Text Text Text Text Text 
          
      </div>
    </div>
  </div>
</div>
 

.content_hov {
  display:inline-block;
}
.pic_hov {
  background-image: url("https://files.homepagemodules.de/b104774/pictures_u610_zHWgswMD.jpg");
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center;  
  box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
} 
.pichover_hov {
  padding: 10px 5px 10px 10px;
  width: 330px; 
  background: #eeeeee; 
  opacity: 0; 
}
.pichover_hov:hover {
  transition-duration: 1s; 
  opacity: 0.9;
  cursor:pointer;
}
.text_hov {
  padding-right:10px;  
  height: 350px;
  font-family: Georgia;
  font-size: 13px;
  line-height: 1.4;
  text-align: justify;
  color: #192649;
  overflow-y: auto;
  scrollbar-width: thin;
}
 

<style>
.content_hov {
  display:inline-block;
}
.pic_hov {
  background: url("https://cdn.pixabay.com/photo/2015/11/03/08/56/question-mark-1019820_1280.jpg");
  background-size: contain;
  background-repeat:no-repeat;
  box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
  width: 330px; 
  height: 330px;
} 
.pic_hov:hover {
  background: url("https://files.homepagemodules.de/b104774/pictures_u610_zHWgswMD.jpg");
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center; 
  cursor:pointer;
  transition-duration:1s; 
}
</style>
 
 
<div class="content_hov">
  <div class="pic_hov"></div>
</div>