/**
 * Plugin Name: 	Fischer Image Widget
 * Plugin URI:		https://www.fischer-softdesign.de
 * Description:		Image Widget
 * Author: 			Hermann Fischer
 * Author URI: 		https://www.fischer-softdesign.de
 */

/* -----------------------------------------------------
	Image separat
	Titel, Symbol und Beschreibung zusammen
*/

.img-title_sym_descr,
.img-wrapper
{
	position: relative;
}

.img-title_sym_descr > *,
.img_title_sym-descr > *
{
	transition: all 0.5s;
}

.img-title_sym_descr .Image,
.img_title_sym-descr .Image
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.img-title_sym_descr .descr-wrapper,
.img-title_sym_descr .Image-Overlay,
.img_title_sym-descr .Image-Overlay
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.img-title_sym_descr .descr-wrapper
{
	top: 25%;
}

.img-title_sym_descr .Title
{
	padding: 5% 15px 0px 15px;
}

.img-title_sym_descr .Description
{
	padding: 5% 15px 0px 15px;
}

.img-title_sym_descr .Title
{
	text-align: center;
}

.img-title_sym_descr .Title h3
{
	transition: all 0.5s;
	display: inline-block;
}

.img-title_sym_descr .Image > *
{
	object-fit: cover;
  	width: 100%;
	height: 100%;
	transition: all 0.5s;
}

.img-title_sym_descr:hover .descr-wrapper
{
	top: 0px;
}

.img-title_sym_descr:hover .Image img
{
	transform: scale(1.1);
}

.img-title_sym_descr:hover .Image-Overlay
{
	background-color: rgba(0,0,0,0.5);
}


/* -----------------------------------------------------
	Image, Titel und Symbol zusammen
	Beschreibung separat
*/

.img-wrapper
{
	position: relative;
}

.img_title_sym-descr > *
{
	transition: all 0.5s;
}

.img_title_sym-descr .Image
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.img_title_sym-descr .Image-Overlay
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.img_title_sym-descr .Image > *
{
	object-fit: cover;
  	width: 100%;
	height: 100%;
	transition: all 0.5s;
}

.img_title_sym-descr:hover .Image img
{
	transform: scale(1.1);
}

.img_title_sym-descr:hover .Image-Overlay
{
	background-color: rgba(0,0,0,0.5);
}

.img_title_sym-descr .Title
{
	position: absolute;
	margin-top: 5%;
	top: 25%;
	width: 100%;
}

.img_title_sym-descr:hover .Title
{
	top: 0px;
}

.img_title_sym-descr .Title
{
	transition: all 0.5s;
	text-align: center;
}

.img_title_sym-descr .Title h3
{
	display: inline-block;
}