Name: Онлайн редактор HTML SCHOOLSW3
Rating: 4.8 (1247 reviews)
Author: SCHOOLSW3

<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<title>Масштабирование изображения при наведении — Код HTML и CSS</title>
<meta name="description" content='В онлайн редакторе SCHOOLSW3.COM вы сможете отредактировать и скачать код "Масштабирование изображения при наведении"'>
<meta name="keywords" content="Редатор кода HTML, редатор кода CSS, редатор кода Javascript">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="/images/schoolsw3_logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/w3css/4/w3.css">
<link rel="stylesheet" href="/lib/codemirror.css">
<script src="/lib/codemirror.js"></script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-7ZF7Z70BND"></script>
<script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7ZF7Z70BND');
</script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5MLD8MW');</script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'G-7ZF7Z70BND', 'auto');
ga('require', 'GTM-5MLD8MW');
ga('send', 'pageview');
</script>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-5MLD8MW':true});</script>
<script>(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(45941085, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true,
trackHash:true
});
</script><script>
//file ID
var fileID = "";
var loadSave = false;
function getSavedFile() {
loadSave = true;
var htmlCode;
var paramObj = {};
paramObj.fileid = "";
fileID = paramObj.fileid;
var paramA = JSON.stringify(paramObj);
var httpA = new XMLHttpRequest();
httpA.open("POST", globalURL, true);
httpA.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpA.onreadystatechange = function() {
if(httpA.readyState == 4 && httpA.status == 200) {
document.getElementById("textareaCode").value = httpA.responseText;
window.editor.getDoc().setValue(httpA.responseText);
loadSave = false;
}
}
httpA.send(paramA);   
}
function retheme() {
var cc = document.body.className;
if (cc.indexOf("darktheme") > -1) {
document.body.className = cc.replace("darktheme", "");
} else {
document.body.className += " darktheme";
}
}
</script>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
color:#000000;
margin:0px;
font-size:100%;
}
.trytopnav {
height:40px;
overflow:hidden;
min-width:380px;
position:absolute;
width:100%;
top:310px;
background-color:#f1f1f1;
}
.trytopnav a {
color:#999999;
}
.w3-bar .w3-bar-item:hover {
color:#757575 !important;
}
a.w3schoolslink {
padding:0 !important;
display:inline !important;
}
a.w3schoolslink:hover,a.w3schoolslink:active {
text-decoration:underline !important;
background-color:transparent !important;
}
#dragbar{
position:absolute;
cursor: col-resize;
z-index:3;
padding:5px;
}
#shield {
display:none;
top:0;
left:0;
width:100%;
position:absolute;
height:100%;
z-index:4;
}
#framesize span {
font-family:Consolas, monospace;
}
#container {
background-color:#f1f1f1;
width:100%;
overflow:auto;
position:absolute;
top:350px;
bottom:0;
height:auto;
}
#textareacontainer, #iframecontainer {
float:left;
height:100%;
width:50%;
}
#textarea, #iframe {
height:100%;
width:100%;
padding-bottom:10px;
padding-top:1px;
}
#textarea {
padding-left:10px;
padding-right:5px;  
}
#iframe {
padding-left:5px;
padding-right:10px;  
}
#textareawrapper {
width:100%;
height:100%;
background-color: #ffffff;
position:relative;
box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#iframewrapper {
width:100%;
height:100%;
-webkit-overflow-scrolling: touch;
background-color: #ffffff;
box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#textareaCode {
background-color: #ffffff;
font-family: consolas,"courier new",monospace;
font-size:15px;
height:100%;
width:100%;
padding:8px;
resize: none;
border:none;
line-height:normal;    
}
.CodeMirror.cm-s-default {
line-height:normal;
padding: 4px;
height:100%;
width:100%;
}
#iframeResult, #iframeSource {
background-color: #ffffff;
height:100%;
width:100%;  
}
#stackV {background-color:#999999;}
#stackV:hover {background-color:#BBBBBB !important;}
#stackV.horizontal {background-color:transparent;}
#stackV.horizontal:hover {background-color:#BBBBBB !important;}
#stackH.horizontal {background-color:#999999;}
#stackH.horizontal:hover {background-color:#999999 !important;}
#textareacontainer.horizontal,#iframecontainer.horizontal{
height:50%;
float:none;
width:100%;
}
#textarea.horizontal{
height:100%;
padding-left:10px;
padding-right:10px;
}
#iframe.horizontal{
height:100%;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;  
}
#container.horizontal{
min-height:200px;
margin-left:0;
}
#tryitLeaderboard {
overflow:hidden;
text-align:center;
margin-top:5px;
height:300px;
}
.w3-dropdown-content {width:350px}
@media only screen and (max-device-width: 768px) {
#tryitLeaderboard {height:265px;}	
#iframewrapper {overflow: auto;}
#container     {min-width:310px;}
.stack         {display:none;}
#tryhome       {display:block;}
.trytopnav     {min-width:310px;}  
}

@media screen and (max-width: 727px) {
#tryitLeaderboard {height:90px;}
.trytopnav {top:99px;}
#container {top:147px;}
#breadcrumb {display:none;}
#tryhome  {display:block;}
}

@media screen and (max-width: 467px) {
#tryitLeaderboard {height:150px;}
.trytopnav {top:160px;}
#container {top:206px;}
.sw3-dropdown-content {width:100%}
}

@media screen and (max-width: 320px) {
#tryitLeaderboard {height:150px;}
.trytopnav {top:160px;}
#container {top:206px;}
.sw3-dropdown-content {width:100%}
}

/*
@media screen and (max-width: 727px) {
.trytopnav {top:70px;}
#container {top:108px;}

}
@media screen and (max-width: 467px) {
.trytopnav {top:60px;}
#container {top:98px;}
.w3-dropdown-content {width:100%}
}

@media screen and (max-width: 320px) {
.trytopnav {top:60px;}
#container {top:98px;}
.w3-dropdown-content {width:100%}
}

@media only screen and (max-device-width: 768px) {
#iframewrapper {overflow: auto;}
#container     {min-width:320px;}
.stack         {display:none;}
#tryhome       {display:block;}
}
*/
@font-face {
font-family: 'fontawesome';
src:url('../lib/fonts/fontawesome.eot');
src:url('../lib/fonts/fontawesome.eot') format('embedded-opentype'),
url('../lib/fonts/fontawesome.woff') format('woff'),
url('../lib/fonts/fontawesome.ttf') format('truetype'),
url('../lib/fonts/fontawesome.svg') format('svg');
font-weight:normal;
font-style:normal;
}
.fa {
display:inline-block;
font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transform:translate(0,0);
}
.fa-2x {
font-size:2em;
}
.fa-home:before {content: '\e800'; }
.fa-save:before {content: '\e804'; }
.fa-rotate:before {content: '\e813'; }
.fa-menu:before { content: '\f0c9'; }
.fa-adjust:before { content: '\e80b'; }
.loader {
border: 6px solid #f3f3f3; /* Light grey */
border-top: 6px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
#saveLoader {
margin:20px;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#iframewrapper {

}

body.darktheme {
background-color:rgb(40, 44, 52);
}
body.darktheme #tryitLeaderboard{
background-color:rgb(40, 44, 52);
}
body.darktheme .trytopnav{
background-color:#616161;
color:#dddddd;
}
body.darktheme #container {
background-color:#616161;
}
body.darktheme .trytopnav a {
color:#dddddd;
}
body.darktheme ::-webkit-scrollbar {width:12px;height:3px;}
body.darktheme ::-webkit-scrollbar-track-piece {background-color:#000;}
body.darktheme ::-webkit-scrollbar-thumb {height:50px;background-color: #616161;}
body.darktheme ::-webkit-scrollbar-thumb:hover {background-color: #aaaaaa;}
</style>

<script>window.yaContextCb=window.yaContextCb||[]</script>
<script src="https://yandex.ru/ads/system/context.js" async></script>
</head>
<body>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5MLD8MW"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<script>
window.yaContextCb.push(() => {
if (Ya.Context.AdvManager.getPlatform() === 'desktop') {
Ya.Context.AdvManager.render({
blockId: 'R-A-1358578-10',
type: 'fullscreen',
platform: 'desktop',
});
} else {
Ya.Context.AdvManager.render({
blockId: 'R-A-1358578-6',
type: 'fullscreen',
platform: 'touch',
});
}
});
</script>
<script>
window.yaContextCb.push(() => {
if (Ya.Context.AdvManager.getPlatform() === 'desktop') {
// вызов Floor Ad для десктопной версии
Ya.Context.AdvManager.render({
blockId: 'R-A-1358578-11',
type: 'floorAd',
platform: 'desktop',
});
} else {
// вызов Floor Ad для мобильной версии
Ya.Context.AdvManager.render({
blockId: 'R-A-1358578-7',
type: 'floorAd',
platform: 'touch',
});
}
});
</script>
<div id='tryitLeaderboard'>
<div id="yandex_rtb_R-A-1359781-1"></div>
<script>
window.yaContextCb.push(()=>{
Ya.Context.AdvManager.render({
"blockId": "R-A-1359781-1",
"renderTo": "yandex_rtb_R-A-1359781-1"
})
})
</script>
</div>
<div id="saveModal" class="w3-modal" style="z-index:4">
<div class="w3-modal-content">
<div class="w3-display-container">
<span onclick="hideAndResetModal()" class="w3-button w3-display-topright" style="font-weight:bold;">×</span>
<div id="preSave" class="w3-panel">
<h2>Сохраните ваш код</h2>
<p>Если вы нажмете кнопку "Сохранить", ваш код будет сохранен и вы получите URL, с который вы можете поделиться с другими.</p>
<div style="height:34px">
<p>
<button class="w3-btn w3-green" style="margin-right:15px" title="Сохранить" onclick="saveFile(document.getElementById('textareaCode').value);">Сохранить</button>
<button class="w3-btn w3-red" title="Отменить" style="margin-right:15px" onclick="hideAndResetModal();">Отменить</button>
</p>
</div>
<p>Нажав кнопку "Сохранить", вы соглашаетесь с нашим <a href="javascript:void(0);" class="w3-hover-text-green" onclick="document.getElementById('saveDisclaimer').style.display='block';">правила и условия</a>.</p>
<p><a href="/index.php" class="w3-button w3-light-grey" onclick="event.preventDefault();displayError()">Сообщить об ошибке</a></p>
<div id="saveDisclaimer" style="display:none;">
<p>Все коды в общих файлах предоставляется пользователями и принадлежат объявлениям.</p>
<p>Все общие файлы становятся общедоступными. Лицензия не применяется.</p>
<p>Любой код может быть удален без предупреждения (если он считается оскорбительным, поврежденным или по любая другая причина).</p>        
<p>schoolsw3.com не несет ответственности за любые утраты или повреждения любого рода во время использования предоставленного кода.</p>
</div>
</div>
<div id="errorSave" style="display:none" class="w3-panel">
<h2>Не удалось сохранить код</h2>
<p>В коде слишком много символов.</p>
</div>
<div id="postSave" class="w3-panel" style="display:none;">
<div id="saveLoader" class="loader"></div>
<div id="saveModalSaved" style="display:none">
<h2>Ваш код был сохранен</h2>
<p>Файл был сохранен в: <a id="shareLink" class="w3-hover-text-green" href="javascript:void(0);" target="_blank"><span id="shareLinkText"></span></a></p>
</div>
</div>
</div>
</div>
</div>
<div id="driveSaveModal" class="w3-modal" style="z-index:4">
<div class="w3-modal-content">
<div class="w3-display-container">
<span onclick="resetDriveSaveModal()" class="w3-button w3-display-topright" style="font-weight:bold;">×</span>
<div id="driveText" class="w3-panel w3-large">
<h2>Сохранить на Google диске</h2>
<p>Если у вас есть аккаунт Google, вы можете сохранить этот код на Google диске.</p>
<p>Google попросит вас подтвердить доступ к Google диску.</p>
<p><label class="w3-text-black"><b>Сохранить файл как:</b></label>
<input class="w3-input w3-border" type="text" id="googleFileName" value="tryhtml_default">
<button class="w3-button w3-light-grey w3-hover-grey w3-hover-text-white w3-margin-top"  title="Сохранить файл на Google диск" onclick="handleAuthClick(event,'save')"><img style="margin-right:5px" alt="Сохранить файл на Google диск" title="Сохранить файл на Google диск" src="/images/driveicon.png">Сохранить файл</button>
</div>
<div class="w3-panel w3-large loader" id="driveSavedPanel" style="display:none">
<p id="driveSavedText"></p>
</div>
</div>
</div>
</div>
<div id="driveLoadModal" class="w3-modal" style="z-index:4">
<div class="w3-modal-content">
<div class="w3-display-container">
<span onclick="resetDriveLoadModal()" class="w3-button w3-display-topright" style="font-weight:bold;">×</span>
<div class="w3-panel w3-large">
<h2>Открыть файл из Google диска</h2>
<p>Если вы сохранили файл на Google диске, вы можете открыть его здесь:</p>
<p><button class="w3-button w3-light-grey w3-hover-grey w3-hover-text-white" title="Открыть файл с Google диска" onclick="handleAuthClick(event,'open')"><img style="margin-right:5px" alt="Открыть файл с Google диска" title="Открыть файл с Google диска" src="/images/driveicon.png">Открыть файл</button></p>
</div>
</div>
</div>
</div>
<div class="trytopnav">
<div class="w3-bar" style="overflow:auto">
<a id="tryhome" href="/index.php" target="_blank" title="Главная страница schoolsw3" class="w3-button w3-bar-item topnav-icons fa fa-home" style="font-size:28px;color:#999999;margin-top:-2px"></a>
<a href="javascript:void(0);" onclick="openMenu()" id="menuButton" title="Открыть меню" class="w3-dropdown-click w3-button w3-bar-item topnav-icons fa fa-menu" style="font-size:28px;color:#999999;margin-top:-2px"></a>

<button class="w3-button w3-bar-item w3-green w3-hover-white w3-hover-text-green" onclick="submitTryit(1)">Посмотреть »</button>
<span class="w3-right w3-hide-medium w3-hide-small" style="padding:8px 8px 8px 8px;display:block"></span>
<span class="w3-right w3-hide-small" style="padding:8px 0;display:block;float:right;"><span id="framesize"></span></span>
</div>
</div>
<div id="shield"></div>
<a href="javascript:void(0)" id="dragbar"></a>
<div id="container">
<div id="navbarDropMenu" class="w3-dropdown-content w3-bar-block w3-border" style="z-index:5">
<span onclick="openMenu()" class="w3-button w3-display-topright w3-transparent w3-hover-dark-grey" title="Закрыть меню" style="font-weight:bold;padding-top:10px;padding-bottom:11px;">×</span>
<div class="w3-bar-block">
<a class="w3-bar-item w3-button" href='javascript:void(0);' title="Изменить расположение" onclick="openMenu();restack(currentStack)"><i class="fa fa-rotate" style="font-size:26px;margin-left:-4px;margin-right:8px"></i><span style="position:relative;top:-4px;left:2px;">Изменить расположение</span></a>

<a class="w3-bar-item w3-button" href='javascript:void(0);' title="Изменить Тему" onclick="openMenu();retheme()"><i class="fa fa-adjust" style="font-size:26px;margin-right:8px"></i><span style="position:relative;top:-4px;left:2px;">Изменить Тему, Темную/Светлую</span></a>
</div>
<footer class="w3-container w3-small w3-light-gray">
<p><a style="display:inline;padding:0;" href="/about/about_privacy.php" target="_blank" onclick="openMenu();" class="w3-hover-none w3-hover-text-green">Конфиденциальность</a> и 
<a style="display:inline;padding:0;" href="/about/about_copyright.php" target="_blank" onclick="openMenu();" class="w3-hover-none w3-hover-text-green">Авторское право 1999-2019</a></p>
</footer>
</div>
<div id="menuOverlay" class="w3-overlay w3-transparent" style="cursor:pointer;z-index:4"></div>
<div id="textareacontainer">
<div id="textarea">
<div id="textareawrapper">
<textarea autocomplete="off" id="textareaCode" spellcheck="false"><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

.container:hover .overlay {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>
</head>
<body>
<h1>Масштабирование изображения при наведении</h1>

<p>Наведите указатель мыши на изображение, чтобы увидеть эффект масштабирования.</p>

<div class="container">
  <img src="img_avatar.png" alt="Аватар" class="image">
  <div class="overlay">
    <div class="text">Привет мир</div>
  </div>
</div>

</body>
</html>

Сообщить об ошибке:

Сообщить об ошибке: