JSFiddle - React, Tailwind, and code Playground

by pleymo

HTML

<table style="border-collapse:collapse;border-spacing:0;border-color:#999"><tr><th style="font-family:Arial, sans-serif;font-size:14px;font-weight:bold;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#a81f1a;text-align:center" colspan="2">« Арт-Профиль »</th></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#F7FDFA; text-align:justify;">

<div style="font-size:12px; margin-top: 20px; margin-left: 10px; margin-right: 10px; margin-bottom: 20px;">

<style type="text/css">

/* Код увеличителя начинается здесь */
/* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo" _fcksavedurl="#nogo"> 
Иначе увеличительне будет работать в IE6 */

.ienlarger {
	float: left;
	clear: none; /* Можно установить left или right по необходимости */
	padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
	padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
}

.ienlarger a { 
	display:block;
	text-decoration: none;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки */
}

.ienlarger a:hover{ /* Не надо изменять тип позиционирования */
 	position:relative;
}


	 


.ienlarger a span {  /* Для большого изображения и названия */
	position: absolute;
	display:none;
	color: #FFCC00; /* Текст названия */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; /* Размер шрифта названия */
	background-color: #000000;
	font-weight: bold;
	padding-top: 5px;
	padding-right:5x;
	padding-bottom: 5px;
	padding-left: 5px;
}

.ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */
border-width: 0;
}

.ienlarger a:hover span { 
	display:block;
	top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры...