Jump to content
ironzorin2

Изменение размера элемента без сдвига соседних

Recommended Posts

Хочу сделать так, чтобы при наведении мышки на карточку товара показывались дополнительные поля. Как это сделано на lamoda.ru

1443914143_(96).thumb.png.15140218fa9f543fa57a2e3bfab5f28e.png

Показ и скрытие полей по событию сделал. Проблема в другом - при изменении размера сдвигается нижний ряд. Как этого избежать?

 

Share this post


Link to post
Share on other sites

position absolute

Share this post


Link to post
Share on other sites

И они все складываются стопкой где-то с краю экрана

Share this post


Link to post
Share on other sites
Только что, ironzorin2 сказал:

И они все складываются стопкой где-то с краю экрана

абсолютно спозиционированный элемент позиционируется относительно родителя у которого position ralative 

 

Share this post


Link to post
Share on other sites

Я пытаюсь сделать так: featered.tpl

<div class="module-slider featured owl-carousel">
  <?php foreach ($products as $product) { ?>
  <div class="product-layout">
    <div class="product-thumb transition clearfix">
      <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
      <div class="caption">

        
        <!-------------------->

        
 <script> 
$('.product-layout').hover(
function(){
$(this).find('.caption').css("display", "block"); 
},
function(){
$(this).find('.caption').css("display", "none"); 
});


</script>


Надо product-layout обернуть ещё в один div?

Share this post


Link to post
Share on other sites

ссылку на сайт

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.