0

mi problema es que despues de cerrar el modal, la imagen de mi < figure > se desplaza hacia arriba, luego de pasar el mouse vuelve a su posicion normal pero un poco arriba. ¿Que sucede?¿Como lo arreglo? Solo incluyo el fragmento que muestra el error.

Hola! mi problema es que despues de cerrar el modal, la imagen de mi < figure > se desplaza hacia arriba, luego de pasar el mouse vuelve a su posicion normal pero un poco arriba. ¿Que sucede?¿Como lo arreglo? Solo incluyo el fragmento que muestra el error.

figure.figure{
    width: 240px;
    height: 360px;
    
    position: relative;
    overflow: hidden;
}

figure.figure >img{
    width: 100% !important;
    height: 100% !important;
    position: relative;
    display:block;
}

.figcapp {
    top: auto;
    padding: 1em;
    height: 5.50em;
    font-size: 1.25em;
    width: 242.4px !important;
    background-color: rgba(255, 255, 255, 0.815);

    color: #3c4a50;
    -webkit-transition: -webkit-transform 0.25s;
    transition: transform 0.25s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}



    figure:hover .figcapp{
        opacity: 1;
        transform: translateY(-100%);
        -webkit-transform:translateY(-100%);
        -moz-transform:translateY(-100%);
        -ms-transform:translateY(-100%);
        -o-transform:translateY(-100%);

    }

    figure .figcapp{
        position: absolute;
        opacity: 0;
        -webkit-transition:all 0.25s ease-in-out;
        -moz-transition:all 0.25s ease-in-out;
        -o-transition:all 0.25s ease-in-out;
        -ms-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;

    }
  
  .abot{
    float: right !important;
    margin-top:-28px !important;
    margin-left: 10px !important;
}

figure h2 {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-align: left !important;
    color: rgb(145, 11, 11);

    max-width: 240px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow:  hidden !important;
}
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


      <div class="mt-1 m-1 ">
                <figure class="figure">
                    <img  src="http://www.paisajesimagenes.com/wp-content/uploads/Descripci%C3%B3n-de-paisajes..jpg"  class="figure-img img-fluid " />
                    
                    <figcaption class="figure-caption caption figcapp">
                        <h2 style="font-size:20px;">Nombreeeeeeeeeeeeeeeeeee</h2><br>
                        <p  class="icon-links">
                 <button type="button" class="btn btn-success abot abotuno" data-toggle="modal" data-target=".modalver">
                                V
                            </button>
                            <input type="hidden" name="caja_texto" />
                            <button type="button" class="btn btn-danger abot abotdos" data-toggle="modal" data-target=".modalguardar">
                                G
                            </button>
                        </p>
                        
                    </figcaption>
                </figure>
            </div>
            
            
            
            
      <div class="modal fade bd-example-modal-lg modalver" tabindex="-1" role="dialog" aria-labelledby="myLargeModaLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal ver</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        
      </div>
    </div>
  </div>
</div>      
            
            
            
            
            
            
            
            
            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

1 respuesta 1

0

Prueba comentando las etiquetas de transfort en los eventos hover del css. Recuerda borrar cache, para probar; a veces eso juega una mala pasada.

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.