Пост (в основном) для пользователей:

» наведи курсор
ЗДЕСЬ ПРОПИСЫВАЕТЕ БОЛЬШИМИ БУКВАМИ ЗАГОЛОВОК Здесь можно поместить текст
.blogodel {
overflow: hidden;
position: relative;
display: inline-block;
}
.blogodel:hover {cursor: pointer;}
.blogodel img {
background-color: #459;
border: none;
margin: 0;
padding: 10px;
}
.blogodel .more {
background-color: #123;
color: #FFF;
font-size: 14px;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)';
position: absolute;
right: 10px; bottom: 10px;
}
.blogodel:hover .more {display: none;}
.blogodel .desc {display: none;}
.blogodel:hover .desc {
background-color:#345;
display: block;
margin: 0;
color: #FFF;
font-size: 12px;
padding: 10px;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
position: absolute;
bottom: 10px; left: 10px; right: 10px;
}
.blogodel:hover .desc strong {
display: block;
font-size: 14px;
line-height: 1em;
}
</style>
<div class="blogodel">
<img border="0" height="300" width="289" src="http://3.bp.blogspot.com/-wLs2KcjtJHE/UEoM7N9KfGI/AAAAAAAABps/pTM8tF1T8Ww/s320/tatoo-html.jpg" />
<div class="more">» наведи курсор</div>
<div class="desc"><strong>ЗДЕСЬ ПРОПИСЫВАЕТЕ БОЛЬШИМИ БУКВАМИ ЗАГОЛОВОК</strong> Здесь можно поместить текст</div>
</div></center>
Там где красная маркировка, вы можете поместить свою картинку. Желтая маркировка это размеры. Зеленая цвет рамки. Если появятся вопросы, задавайте в комментариях.
29 коммент.:
http://www.stilia.ru/
https://www.blogger.com/profile/16135900834091847243
А как шрифт поменять? У вам ровный и красивый, а в моем на блоге на блоггере - уродство.
Вот пробовала. не работает
.blogodel:hover .desc strong {
display: block;
font-size: 16px;
font-face:Cosmic Sans;
line-height: 1em;
https://www.blogger.com/profile/13746790384341325111
Это мой тренировочный блог. Я новичок.
В левом верхнем углу тренируюсь вставлять картинку. Вы все подробно и доходчиво расписали - я убрала рамку, изменила размер шрифта, вставила ссылку, но вот со шрифтом я не справилась...
https://www.blogger.com/profile/09197415860991641980
https://www.blogger.com/profile/09197415860991641980
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/09197415860991641980
https://www.blogger.com/profile/08726457423694510321
https://www.blogger.com/profile/08726457423694510321
https://www.blogger.com/profile/08726457423694510321
.blogodel .desc {display: none;}
.blogodel:hover .desc {
background-color:#345;
display: block;
margin: 0;
color: #FFF;
font-size: 12px;
padding: 10px;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
position: absolute;
bottom: 10px; left: 10px; right: 10px;
}
величины (left,right)
Настраивать лучше в редакторе: http://www.timsfreestuff.com/HTMLEditor/
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/08726457423694510321
Блог все тот же, праздничное агентство "FIESTA"
http://fiestaagency.blogspot.ru/
И кстати не собираетесь написать про то как присвоить домен блогу? Смотрю на com перешли?))
https://www.blogger.com/profile/08726457423694510321
http://blogodel.com/2012/08/prostoj-konstruktor-socialnyh-knopok.html
com у меня уже давно, про домен публиковать не буду, так как в сети навалом инфы на эту тему.
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/08726457423694510321
https://www.blogger.com/profile/11564532641349372462
http://www.expert-servise.ru/
http://tsb-bucha.com.ua/videocam/
https://www.blogger.com/profile/03955570080652833442
https://www.blogger.com/profile/03288953295588160201
((
https://www.blogger.com/profile/16531363673801401511
Что конкретно хочу узнать: разве нельзя так сделать, чтобы работало, как и по принципу "стандартной" надписи к фото во время опубликования поста. То есть, там же пишешь под фотками свой текст и он появляется разный без лазания в html-шаблон.
https://www.blogger.com/profile/02411181531550946852
При наведении на курсор я сделал так, чтобы появляющийся прямоугольник с текстом был ровно по размеру всей картинки на которой он и появляется, т.е. он закрывает её всю. В связи с этим если я делаю картинку ссылкой, то она не работает, т.к. при наведении курсора вся картинка закрыта прямоугольником с текстом. Моно сделать ссылкой текст на этом самом прямоугольнике, но я хочу немного другого, а именно чтобы весь всплывающий прямоугольник и текст были одной единой ссылкой. Никак не могу решить эту проблему, подскажите если у вас есть решение.
П.С. Надеюсь не очень запутано записал))
https://www.blogger.com/profile/08726457423694510321
Но у меня работает только если вставить текст в атрибут title (а не alt, как в примере), но тогда вылазит окошко с описанием. Если скопировать код в примере, то текст не выводится. Посмотрел код страницы примера, там атрибут title alt="...". Но так тоже не работает.
Что можете сказать по этому поводу?
P.S. Задавал автору сайта уже несколько вопросов, но он пока не отвечает, поэтому решил поискать на других ресурсах.
https://www.blogger.com/profile/14503432090831589005
https://www.blogger.com/profile/18079555604350053486
Отправка комментария
Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!