1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

SlideShow jquery texto sobre imagen

Tema en 'Jquery' comenzado por Bukketazo, 25 de Abril de 2017.

  1. Bukketazo

    Bukketazo Nuevo Miembro

    Se incorporó:
    25 de Abril de 2017
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola que tal todos, estoy haciendo un proyecto para la universidad e investigando en la web encontre un canal de youtube, FalconMaster que me ha ayudado bastante la verdad, en fin.

    Mi problema es el siguiente, seguí todos los pasos sobre como crear un slideshow.



    Todo muy bien el slideshow funciona de maravilla, los botones next y prev solucionados...
    la duda que tengo es que he intentado poner texto sobre la imagen (ya que estoy haciendo una pagina web de noticias) y lo que quiero hacer es poner un titulo sobre la imagen y un párrafo para una previa sobre lo que trata el contenido de ella, y lo que sucede es que el texto cae sobre la imagen y de hecho la recorta un poco.

    "URL=http://prnt.sc/f0i985". <--- esto es una captura de pantalla tomada por lightshot.

    el tema es que he intentado con varias soluciones (según yo) y obvio no funcionaron, por eso estoy escribiendo acá, como por ejemplo esto es lo último que he escrito:

    .main{
    width:90%;
    max-width:1000px;
    float:left
    }

    .slides{
    width:100%;
    }

    .slides img{
    width:100%;
    position:relative;

    }

    .slides img p{
    position:absolute;
    top:100px;
    left:50px;
    }



    pero aún así no he logrado que el texto se mueva 1cm...
    estoy trabajando así.

    <div class="main">
    <div class="slides">
    <div>
    <p>hola</p>
    <img src="slideshow/img/imagen.jpg"></div>
    <div><img src="slideshow/img/imagen.jpg"></div>
    <div><img src="slideshow/img/imagen.jpg"></div>
    <div><img src="slideshow/img/imagen.jpg"></div>
    </div>

    </div>
    /*(cambie los nombres de las imágenes).*/

    si alguien tiene alguna sugerencia para poder solucionar mi problema se lo agradeciera bastante.
    De ante mano muchas gracias :).
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.428
    Me gusta recibidos:
    652
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    sube el codecompleto a codepen para verlo bien
     
  3. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Para mostrar el texto que mencionas... el cual de la manera que hace no es factible... Aquí la única forma es que posiciones los elementos padre e hijos, en donde el padre es el div que contiene a los hijos (imagen y texto) es parecido al que describe pero no es factible como te mencione ya que no puede posicionar un elemento P, ..... Como lo harías, puedes definir un elemento div como hijo el cual contenga el texto que quieres mostrar y para ello solo basta poner al div padre una position relative, o_Oo_O e imagino que conoces las posiciones, cual cosa que no sepas te dejo la siguiente URL https://www.w3schools.com/css/css_positioning.asp .... Bueno luego de haber posicionado la posición anterior ahora al elemento hijo <div> debe de contener un posición absolute.. una vez realizado ya tendrás tu texto encima de la image... y solo queda algo que realizar, por mediante las porpiedades float, left, bottom, right puedes posicionar el elemento div hijo como lo muestro en la imagen siguiente...

    Aquí dejo una posible solución en el siguiente link... pero utilizando otros elmentos HTML, solo tienes que analizarlo y adaptarlo a tu página noticias. o_Oo_O

    https://www.w3schools.com/code/tryit.asp?filename=FEZFZN2PCO66

    [​IMG]

    Espero que sea de gran ayuda...
     
    Última modificación: 25 de Abril de 2017
    A Bukketazo y AngelKrak les gusta esto.
  4. Bukketazo

    Bukketazo Nuevo Miembro

    Se incorporó:
    25 de Abril de 2017
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Muchas gracias! justo lo que necesitaba :D, aclaraste todas mis dudas :rolleyes::rolleyes::rolleyes:
     

Comparte esta página