¿Cómo puedo hacer fácilmente un título de texto en el medio de una imagen?

Está bien, entonces he estado haciendo algunas renovaciones en mi sitio web y estoy intentando que en la página de inicio veas varias imágenes y lo que quiero que suceda es que cuando pasas el puntero sobre la imagen se borra y el texto aparece en el centro de la imagen . Pude hacer que las imágenes se borren, pero lo cierto es que todos los tutoriales y las preguntas y respuestas sobre los foros que he encontrado usan posicionamiento absoluto.

Cuando hago eso, termino con todas las imágenes astackdas una encima de la otra. Luego coloqué divs alrededor de cada imagen e hice que las imágenes estuvieran relativamente posicionadas. El resultado fue el mismo. Comprobé mi código en validadores y salió sin errores. Realmente podría necesitar ayuda.

Aquí está mi configuración actual (las imágenes están donde las quiero y se desdibujan al pasar el mouse) https://jsfiddle.net/u9smc561/ Aquí está mi HTML

     


MEM 3500 Films is a collection of stop-motion animated videos.
To learn more about MEM 3500 Films check out the About Page.
Just click on the movie poster to go to that movies page where you can watch it.


The Coffee Break
tvsr
Lt. James
The robbers race
The French Plane
MKI6
tps
The Air-to-Ground Attack
The Counterfeiters
mem 3500 films















LEGO, the LEGO logo, and the Minifigure are trademarks and/or copyrights of the LEGO Group. I am not supported by LEGO or in any way is this website. Check out the LEGO website for more cool stuff. LEGO.com

Valid CSS!

Y mi CSS

 /* makes the stuff for the tall posters */ .poster { -webkit-transition: -webkit-filter 0.4s; -moz-transition: -webkit-filter 0.4s; -ms-transition: -webkit-filter 0.4s; -o-transition: -webkit-filter 0.4s; transition: -webkit-filter 0.4s; width: 100%; border-radius: 15px; max-width: 450px; max-height: 601px; } .poster:hover{ -webkit-filter: blur(7px); filter: blur(7px); } /* makes the stuff for the wide posters */ .poster1 { -webkit-transition: -webkit-filter 0.3s; -moz-transition: -webkit-filter 0.3s; -ms-transition: -webkit-filter 0.3s; -o-transition: -webkit-filter 0.3s; transition: -webkit-filter 0.3s; width: 100%; border-radius: 15px; max-width: 450px; max-height: 260px; } .poster1:hover{ -webkit-filter: blur(7px); filter: blur(7px); } /* the main div holders for the posters */ .left { width: 49%; display: inline-block; margin-left: 1px; text-align: right; } .right { width: 49%; display: inline-block; margin-right: 0px; text-align: left; } /* the menu bar stuff */ @media only screen and (min-width : 801px) { .menuBar { display: block; } .smenuBar, .close{ display: none; } /* makes sure the buttons are not to big */ .home { width: 10.1%; max-width: 107px; } .about { width: 11.1%; max-width: 117px; } .comment { width: 16.7%; max-width: 173px; } .pic { width: 16.8%; max-width: 174px; } .active { width: 16.1%; max-width: 167px; } .blank { width: 1%; max-width: 3px; max-height: 25px; margin-top: 10px; margin-bottom: 10px; } /* makes the hover effect for the menu buttons */ .menu { cursor: pointer; margin-top: 10px; margin-bottom: 10px; -webkit-transition: -webkit-filter 0.5s; /* Safari */ -moz-transition: -webkit-filter 0.5s; -ms-transition: -webkit-filter 0.5s; -o-transition: -webkit-filter 0.5s; transition: -webkit-filter 0.5s; } .menu:hover { cursor: pointer; margin-top: 10px; margin-bottom: 10px; -webkit-filter: invert(1); /* Safari */ -moz-filter: invert(1); -ms-filter: invert(1); -o-filter: invert(1); filter: invert(1); } } /* end of computer menu bar config */ /* start of mobile menu config */ @media only screen and (max-width : 800px) { /* stuff to make sure the other menu doesn't show */ .menuBar { display: none; } .smenuBar, .close { display: block; } .menuPic { width: 90%; max-width: 143px; } /* stuff to make sure there isn't indenting */ li { list-style-type: none; padding: 0; } ul { list-style-type: none; padding: 0; margin: 0; } /* drop down part of the menu stuff */ nav ul ul { height: 0px; overflow: hidden; -webkit-transition: height 0.5s; /* Safari */ -moz-transition: height 0.5s; -ms-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; } nav ul .line:hover > ul { height: 335px; } nav ul .line:active > ul { height: 335px; } nav ul .line:hover + .close { height: 52px; } nav ul .line:active + .cose { height: 52px; } .close { text-align: center; background:rgba(0,0,0,0.8); height: 0px; overflow: hidden; -webkit-transition: all 0.5s; /* Safari */ -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } /* makes the hover effect for the menu buttons */ .menu { cursor: pointer; margin-top: 10px; margin-bottom: 10px; -webkit-transition: -webkit-filter 0.5s; /* Safari */ -moz-transition: -webkit-filter 0.5s; -ms-transition: -webkit-filter 0.5s; -o-transition: -webkit-filter 0.5s; transition: -webkit-filter 0.5s; } .menu:hover { cursor: pointer; margin-top: 10px; margin-bottom: 10px; -webkit-filter: invert(1); /* Safari */ -moz-filter: invert(1); -ms-filter: invert(1); -o-filter: invert(1); filter: invert(1); } } .selector { width: 100%; background-image:url('pic/wline.jpeg'); padding: 0; } /* end of menu config */ /* sets the body properties */ body { background-image:url('http://www.mem3500films.minksfamily.com/pic/lego.jpeg'); background-color: #ffd700; text-align:center; font-size: 25px; } /* the title attributes */ body{margin:0;padding:0} #head { background-image:url('http://www.mem3500films.minksfamily.com/pic/lego1.jpeg'); background-repeat:repeat; width: 100%; } /*the menu line div attributes */ body{margin:0;padding:0} .line { background-image:url('http://www.mem3500films.minksfamily.com/pic/line.jpeg'); background-repeat:repeat; width: 100%; } /* makes sure that the website title is not to big */ .M35F { width: 100%; max-width: 905px; margin-top: 20px; margin-bottom: 20px; } /* makes sure links never get underlined */ a { text-decoration:none; } /* gives the footer a background image */ footer { background-image:url('pic/white.jpeg'); background-repeat:repeat; text-align: left; background-color: #FFFFFF; color: #888888; font-size: 25px; } 

En mi configuración actual, lo tengo para que las imágenes cambien de tamaño con la ventana y luego dejen de crecer con un tamaño determinado. Esto funciona bien ahora y quiero que sea capaz de hacer esto al final.

Pero intenté SOOOO muchas cosas para hacer que esto funcione y pasé horas (literalmente), pero no importa lo que haya hecho, parece que no funciona. ¿Lo que estoy filmando no es posible ni siquiera con CSS y HTML?

Recuerde un concepto importante. Los elementos posicionados absolutos se posicionan relativamente el primer ANCESTA que tiene una posición diferente de “estática”. Por lo tanto, para colocar sus “cuerdas” necesita

  • envolver las imágenes en un div
  • hacer que div “posición: relativa”
  • poner el texto en un div o un lapso u otro contenedor
  • hacer que el contenedor “posición: abolute”

De esta forma, no deberías tener problemas con las imágenes situadas una encima de otra.

 .poster p { position:relative; top:50%; transform:translateY(-50%); } 

Esto se posicionará en el centro vertical.

agregue lo siguiente a .poster:

 text-align:center;