Наложение фона на картинку с разных сторон
Здравствуйте, проблема следующая, есть несколько блоков div в них лежат картинки, как сделать эффект наложения полупрозрачного фона и чтоб этот полупрозрачный фон выпадал с той стороны с которой был наведен курсор мышки, т.е. навел на картинку с верху наложение идет с верху, навел на картинку с права наложение идет с права, в этом духе что-то... Заранее спасибо!!
|
Сначала делаешь все как нужно, но как будто навели на все... Потом настраиваешь ЦСС-стили так, что бы эти наложения были видны только при наведении мыши.
Вот как-то так... |
а можно по-подробнее? или код для примера.
|
В CSS у меня получилось сделать с помощью multi-hover класса, но мне нужно на js т.к. CSS тормозит немного, в общем не устраивает
|
Alex.prog.1994,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> body { width: 90vw; height: 90vh; background-color: #8A2BE2; } .test{ margin: 0; top: 100px; left: 100px; height: 100px; width: 100px; opacity: .4; background-color: #DBDBDB; position: absolute; } .hot{ overflow: hidden; padding: 0 border: 1px dashed Gray; height: 100px; width: 100px; margin: 100px; background-image: url(http://img-fotki.yandex.ru/get/5306/102699435.2e4/0_6a606_5fdbe51b_S.jpg); background-size: 100px 100px; background-repeat: no-repeat; position: relative; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(function() { var hot = $(".hot"); hot.on("mouseenter", function(e) { var pos = $(this).offset(), h = $(this).height(), w = $(this).width(); var x = e.pageX - pos.left - w / 2; var y = e.pageY - pos.top - h / 2; var from = Math.abs(x) > Math.abs(y) ? x > 0 ? { top: 0, left: w } : { top: 0, left: -w } : y > 0 ? { top: h, left: 0 } : { top: -h, left: 0 }; $("div", this).stop(true, true).css(from).animate({ top: 0, left: 0 }, 800) }).on("mouseleave", function(e) { var pos = $(this).offset(), h = $(this).height(), w = $(this).width(); var x = e.pageX - pos.left - w / 2; var y = e.pageY - pos.top - h / 2; var to = Math.abs(x) > Math.abs(y) ? x > 0 ? { left: w } : { left: -w } : y > 0 ? { top: h } : { top: -h }; $("div", this).stop(true, true).animate(to, 500) }) }); </script> </head> <body> <div class="hot"><div class="test"></div></div> </body> </html> |
Вот это прям то что мне было нужно, огромное спасибо за помощь;) , неделю искал не мог найти то что нужно:(
|
Часовой пояс GMT +3, время: 10:18. |