@charset "utf-8";
/* CSS Document */

.accessoires {
margin: 0 auto;
width: 338px;
height: 220px;
text-align:left;
border-color:#CCCCCC;
border: 2px;
padding: 5px;
} 

.electronics {
float: left;
margin: 15px;
padding: 15px;
width: 338px;
height: 200px;
border: 1px solid black;
background:#000000;
} 

.verlichting {
float: left;
margin: 15px;
padding: 15px;
width: 338px;
height: 200px;
border: 1px solid black;
background:#FF00ff;
} 

.imagehover p {
color: #fff;
}
.imagehover p:hover {
color: #000;
}

ul.img-list {
  list-style-type: none;
  margin-top: 30px;
  padding: 0;
  text-align: center;
}
 
ul.img-list li {
  display: inline-block;
  height: 200px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 338px;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 200px;
  left: 0;
  position: absolute;
  top: 0;
  width: 338px;
}
 
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 200px;
  left: 0;
  position: absolute;
  top: 0;
  width: 338px;
  opacity: 0;
}
 
ul.img-list li:hover span.text-content {
  opacity: 1;
}

span.text-content {
	background: rgba(0,0,0,0.5);
	color: white;
	font-weight:bold;
	font-size:20px;
	cursor: pointer;
	display: table;
	height: 200px;
	left: 0;
	position: absolute;
	top: 0;
	width: 337px;
	opacity: 0;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}