Ayuda imagen opaca HTML.

¡Hola gente bonita!
Estoy aquí más que nada para buscar instrucciones y poder moderar un blog de un fansub que tengo, de hecho ahora mismo estaba revisando tutoriales y otras respuestas pero me encontré con un problema que no sé cómo resolver.






Si se dan cuenta, incluso el poner el mouse alrededor de la imagen, osea... así afuerita, no seleccionándola, igual se activa el segundo hover. ¿Cómo puedo resolverlo?

Código:

<div class="primera"><img src="https://i.imgur.com/S9VzvH1.png" width: 200px; height: 120px><div class="segunda">Fate/Apocrypha</div></div>
<style>.primera {0000} .segunda {width: 200px; height: 120px; position: relative; margin-top: -133px; margin-left: 5px; font-family: arial; font-size: 13px; color: white; line-height: 30px; text-align: center; letter-spacing: 0.4px; font-style: arial; background: URL(https://i.imgur.com/4aoHwSV.png); transition: 0.8s linear; opacity: 0;} .primera:hover .segunda {opacity: 1}</style>

Y otra cosa que acaba de pasar, en mi página de blogspot se ve que ambas imágenes (la en color y otra opaca) se ven bien; pero acá se ve la opaca más corrida... ¿Qué sucede? No entiendo cómo se ve bien en un lugar y mal en otro, jajajaj.

Es la primera vez que uso HTML y tengo mucho qué aprender todavía. :(

Hola Hersha, veamos primero que nada te recomiendo leer el tutorial 07 que es para hacer un efecto como el que buscas. Bueno en tu caso note que tu CSS esta un poco incompleto, y quizás sea por eso que no sale el efecto. Siguiendo el tutorial que te dije, vemos que con el HTML debes tener 2 divs, uno que será la imagen de fondo y el otro que llevará el texto:

Código:

<div class="primera"><img src="https://i.imgur.com/S9VzvH1.png" width: 200px; height: 120px><div class="segunda">Fate/Apocrypha</div></div>

Ahora si te fijas el codigo anterior es como lo tienes tú, no es necesario que pongas un elemento de imagen dentro del primer div, puedes usar el background-image para poner la imagen como fondo del mismo div. Otra cosa, si te fijas estos elementos que pusiste width: 200px; height: 120px, estan puestos sin elementos contenedores para definir la función que deben tener en el código

Código:

<div class="primera" style="background-image: url(https://i.imgur.com/S9VzvH1.png)"><div class="segunda">Fate/Apocrypha</div></div>

Usando el background-image dentro de la etiqueta style en el mismo div podrás usar la misma estructura en otro lugar y solo cambiar la imagen de fondo.

Ahora vamos con el CSS, tu no tienes ningun elemento para el primer div, no sé porque colocaste solo unos 0000, pero ahí debes poner los datos que dejaste sueltos anteriormente.

Código:

.primera {
width: 200px;
background:#fff;
height:120px;
}

Y ahora sí hacer el del segundo div que llevará el texto:

Código:

.segunda {
width: 200px;
height: 120px;
position: relative;
font-family: arial;
font-size: 13px;
color: white;
text-align: center;
letter-spacing: 0.4px;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.8s linear;
opacity: 0;}

.primera:hover .segunda {opacity: 1;}

Ahora si notaste en el background del segundo div quitamos la imagen que tenias para usar el background-color que nos dará la opacidad en el color deseado usando el valor de rgba.

Y bueno nos debería quedar algo así ahora:




PD. Si notas la imagen de fondo parece tener un borde blanco y por eso se ve como 'movida' o recortada

Hola Roshio, gracias por responder. ^^
Te seré sincero, el mes pasado estuve viendo unos tutoriales random en internet pero que al final no me llevaron a ni una parte. Guardé lo que hice de HTML y cuando llegué a este foro, mirando los tutoriales, en vez de empezar desde cero usé como base ese código feo que tenía guardado... al final sólo nos dio dolores de cabeza. =_=

Ahora bien, justamente el primer tutorial que había leído fue el número 7 junto con el de terminologías HTML, de hecho los he estado revisando varias veces para ir paso por paso junto con tus correcciones. Creo que voy entendiendo mucho mejor a diferencia de ayer jajaja. La imagen que tenía era un png con borde redondeado, porque desconocía la forma de darle unos "bordes" a la imagen para que no se viera tan cuadrada. También los "000000" era más que nada para no olvidar rellenar ese campo y justamente se me fue sacarlos. :P

Pero tengo una duda, o bueno muchas(?), ya que en el segundo div colocaste

Código:

background-color: rgba(0, 0, 0, 0.7);

¿podrías explicarme cómo funciona? para saber bien a qué corresponde cada número y por qué son 4 y no más, o menos.

Tengo otras preguntas, pero eso será más adelante(?), por ahora te muestro la tablita nueva con los datos que me has dicho.

Hola Hersha, bueno a veces si un código no nos sale como queremos y no podemos identificar el error, lo mejor es volverlo a empezar desde el principio, puede que haya ocasiones en que se nos vaya una letra o un símbolo o olvidemos cerrar una baliza, pero no nos fijemos, así que hay que repasar todo desde el inicio.

Te recomiendo que vayas en los tutoriales que tenemos aquí desde el primero y progresivamente para que te vayas familiarizando con los códigos, sobre todo que practiques cada tutorial al menos 10 veces (es una tarea que suelo darle a los usuarios nuevos que desean aprender).

Y bueno te paso este tema con terminología HTML general para que también vayas conociendo e identificando mejor las partes del HTML.