Resulta que tengo una imagen con un hover
donde un texto se desplaza y se muestra. El problema es que el texto está encerrado en un rectángulo y encima tiene transparencia. Necesitaría quitar esas dos cositas.
¿Puede alguien ayudarme? Desde ya, muchas gracias.
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
* {
margin: 0px;
padding: 0px;
background-color: #E8ECF4;
}
#header {
width: 80%;
position: fixed;
font-family: 'Open Sans', sans-serif;
}
#header {
background-color: #66c2ff;
margin-left: 10%;
margin-right: 10%;
z-index: 100;
}
.nav {
width: 100%;
/*Le establecemos un ancho*/
margin: 0 auto;
/*Centramos automaticamente*/
font-family: 'Open Sans', sans-serif;
}
ul {
list-style: none;
background-color: #66c2ff;
}
.nav>li {
float: left;
}
.nav li a {
background-color: #66c2ff;
color: #fff;
text-decoration: none;
padding: 10px 12px;
display: block;
}
.nav li a:hover {
background-color: #33adff;
}
.nav li ul {
display: none;
position: absolute;
min-width: 140px;
}
.nav li:hover>ul {
display: block;
}
.nav li ul li {
position: relative;
}
.nav li ul li ul {
right: -140px;
top: 0px;
}
nav {
width: 100%;
}
#Principal {
/*background-color:rgba(176,196,222,0.6); rgbA */
background-color: #FFFFFF;
/*opacity: 0.6;*/
/*filter: alpha(opacity=50); For IE8 and earlier */
margin-left: 10%;
margin-right: 10%;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 50px;
}
.Flag {
width: 128px;
height: 75px;
}
.Flag:hover {
opacity: 0.5;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
/* CONTENEDOR TEXTO EN BANDERA */
.img-container {
position: relative;
overflow: hidden;
cursor: pointer;
width: 128px;
height: 75px;
display: inline-block;
margin-bottom: 5px;
}
.img-container:before {
content: '';
width: 128px;
height: 75px;
position: absolute;
background: #fff;
opacity: 0;
transition: opacity .2s linear;
}
.img-container:hover:before {
opacity: .50;
}
.img-container p {
/*width: inherit; */
color: #fff;
text-align: center;
font-size: 30px;
position: absolute;
font-family: 'Open Sans', sans-serif;
top: 100%;
transition: top .2s linear;
}
.img-container:hover p {
top: 50%;
}
.NombreContinente {
font-size: 40px;
font-family: 'Open Sans', sans-serif;
background-color: #ffffff;
margin-bottom: 5px;
}
hr {
margin-top: 5px;
margin-bottom: 10px;
}
.Logo {
width: 134px;
height: 93px;
margin-left: 10%;
}
<html>
<head>
<title>Wondolor's Adventures!</title>
<link href="Css/estilos.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<header>
<img src="Images/Logo.png" class="Logo" alt="Home">
<div id="header">
<nav>
<ul class="nav">
<li><a href="Index.html">Inicio</a></li>
<li><a href="Destinos.html">Destinos</a>
<ul>
<li><a href="">Europa</a>
<ul>
<li><a href="">Italia</a></li>
<li><a href="">Francia</a></li>
<li><a href="">Vaticano</a></li>
<li><a href="">España</a></li>
<li><a href="">Inglaterra</a></li>
</ul>
</li>
<li><a href="">América</a>
<ul>
<li><a href="">Argentina</a></li>
<li><a href="">Brasil</a></li>
<li><a href="">Ecuador</a></li>
</ul>
</li>
<li><a href="">África</a></li>
<li><a href="">Asia</a></li>
<li><a href="">Oceanía</a>
</li>
</ul>
</li>
<li><a href="">Series</a>
<ul>
<li><a href="">Viaje a Misiones (2016)</a></li>
<li><a href="">Viaje a Brasil (2016)</a></li>
<li><a href="">Misiones en Invierno (2016)</a></li>
<li><a href="">Viaje por Europa (2017)</a></li>
<li><a href="">Viaje a Ecuador (2018)</a></li>
</ul>
</li>
<li><a href="">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<div id="Principal">
<p class="NombreContinente">Europa</p>
<hr>
<div class="img-container"><img src=http://flags.fmcdn.net/data/flags/w580/es.png class="Flag">
<p>España</p>
</div>
<div class="img-container"><img src=http://flags.fmcdn.net/data/flags/w580/fr.png class="Flag">
<p>Francia</p>
</div>
<div class="img-container"><img src=http://www.cenacat.org/app/webroot/files/bandera_vaticano.png class="Flag">
<p>El Vaticano</p>
</div>
<p class="NombreContinente">América</p>
<hr>
<img src=Images/Flags/Uruguay.jpg class="Flag">
</div>
<div id="fb-root"></div>
</body>
</html>