1

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>

1 respuesta 1

1

Espero que te sirva de ayuda las modificaciones que le hice a tu código, solo corrobora de qué manera son aplicadas las opacidades para que no tengas problemas futuros, y corrobora como aplicas los estilos a los diferentes elementos, saludos y excelente día.

	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 
			{
				//background: transparent;
			}
			
			
			/* 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;
              background: transparent;
			}

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

2
  • ¡Muchas gracias! Me ha servido.
    – Wondolor
    Commented el 26 jun. 2018 a las 11:53
  • @Wondolor si la respuesta te ha sido útil, por favor, márcala como aceptada
    – Lucía
    Commented el 3 dic. 2019 a las 9:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.