0

tengo una duda lo que pasa es que estoy tratando de hacer lo mismo que la imagen

introducir la descripción de la imagen aquí

En pocas palabras al pasar con el mouse la imagen que se agrande esta (ese código ya lo hice), pero al querer visualizarlo a la derecha se mueven todos los datos que tengo a la derecha, mientras que en la foto al ver cualquier foto solo se sobrepone a los datos por delante. Este es el código que estoy haciendo, no sé si este bien. Gracias

    <div><!--Caja contenedora-->

          <div style="float:left"><!--Col1-->              
              <% If (dt2.Rows(i).ItemArray(26).ToString = "V") Then
                      Dim vImagenPortada1 As String = "INDICE/LIBROS/1Portadas_jpg/" & dt2.Rows(i).ItemArray(0) & ".jpg"
                      Dim vImagenPortada As String = "imagenes/2018/imgLibro_Disponible.jpg"%>
              <div>
                  <img src='<%=vImagenPortada1 %>' alt='No tiene índice' style='height: 200px; width: 150px' />
                  <img id="imgZoom1" width="100" height="125" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="Imagenes/2019/3021.jpg"/>
              </div>
              <%ElseIf (dt2.Rows(i).ItemArray(26).ToString = "P") Then
                      Dim vImagenPortada1 As String = "INDICE/LIBROS/9999_sinportada.jpg"
                      Dim vImagenPortada As String = "imagenes/2018/imgLibro_Prestado.jpg"%>
              <div>
                  <img src='<%=vImagenPortada1 %>' alt='No tiene índice' style='height: 200px; width: 150px' />
                  <img id="imgZoom2" width="100" height="125" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="Imagenes/2019/3021.jpg"/>
              </div>
              
                  <%ElseIf (dt2.Rows(i).ItemArray(26).ToString = "R") Then
                          Dim vImagenPortada1 As String = "INDICE/LIBROS/9999_sinportada.jpg"
                          Dim vImagenPortada As String = "imagenes/2018/imgLibro_yaReservado.jpg"%>
              <div>
                  <img src='<%=vImagenPortada1 %>' alt='No tiene índice' style='height: 200px; width: 150px' />
                  <img id="imgZoom3" width="100" height="125" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="Imagenes/2019/3021.jpg"/>
              </div>             
              <% End If%>
            </div>
          <div>
              <div>
                  <!--Col2-->
                  <div>Título</div>
                  <div>Autor</div>
                  <div>Edición</div>
                  <div>Datos de Publicación</div>
                  <div>Páginas</div>
              </div>

              <div>
                  <!--Col3-->
                  <div><%=dt2.Rows(i).ItemArray(3).ToString() %></div>
                  <div><%=dt2.Rows(i).ItemArray(7).ToString() %></div>
                  <div><%=dt2.Rows(i).ItemArray(6).ToString() %></div>
                  <div><%=dt2.Rows(i).ItemArray(12).ToString() %></div>
                  <div><%=dt2.Rows(i).ItemArray(30).ToString() %></div>
                  <div><%=dt2.Rows(i).ItemArray(0).ToString() %></div>
              </div>
          </div>

          <div><!--Col4-->
              <div id="overlay" onmousemove="zoomIn(event)"></div>
          </div>

        </div>
      </div>


  [1]: https://i.stack.imgur.com/xt0KC.png

1 respuesta 1

1

Amigo creo que la solución que buscas la podrías conseguir más fácil manipulando el hover mediante el css ya que podrías establecer un z-index para la sobreponer la imagen y para el efecto de aumentar la imagen puedes hacer un hover en el css ejemplo:

#idImagen:hover{
    transform: scale(1.1);
    transition: .2s;
        z-index: 1000;
}

espero haberte ayudado.

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.