.photosotr { width: 250px; } img.rad { border-radius: 10px; border: 1px solid #FFFFFF; width: 160px; } img.imgarc { border-radius: 10px; border: 1px solid #FFFFFF; width: 160px; } img.rad:hover { border-radius: 10px; border: 1px solid #0000FF; } img.radtop { border-radius: 10px; /*border: 1px solid #FFFFFF;*/ } img.radtop:hover { border-radius: 10px; /*border: 1px solid #0000FF;*/ } /* картинка на странице =================================================================*/ .minimized { width: 250px; cursor: pointer; border: 1px solid #FFF; } .minimized:hover { border: 1px solid blue; } /* увеличенная картинка */ #magnify { display: none; /* position: absolute; upd: 24.10.2016 */ position: fixed; max-width: 600px; height: auto; z-index: 9999; } #magnify img { width: 100%; } /* затемняющий фон */ #overlay { display: none; background: #000; position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.5; z-index: 9990; } /* кнопка закрытия */ #close-popup { width: 30px; height: 30px; background: #FFFFFF; border: 1px solid #AFAFAF; border-radius: 15px; cursor: pointer; position: absolute; top: 15px; right: 15px; } #close-popup i { width: 30px; height: 30px; background: url(https://codernote.ru/files/cross.png) no-repeat center center; background-size: 16px 16px; display: block; } @keyframes rota { 25% { transform: rotate(360deg); } } #close-popup:hover { animation: rota 4s infinite normal; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* картинка на странице --------------------- $(function(){ $('.minimized').click(function(event) { var i_path = $(this).attr('src'); $('body').append('
'); $('#magnify').css({ left: ($(document).width() - $('#magnify').outerWidth())/2, // top: ($(document).height() - $('#magnify').outerHeight())/2 upd: 24.10.2016 top: ($(window).height() - $('#magnify').outerHeight())/2 }); $('#overlay, #magnify').fadeIn('fast'); }); $('body').on('click', '#close-popup, #overlay', function(event) { event.preventDefault(); $('#overlay, #magnify').fadeOut('fast', function() { $('#close-popup, #magnify, #overlay').remove(); }); }); }); ----------------------------
клик для увеличения
=================================================================*/