Grupa: Viesis

UWM FORUMS · PORTFOLIO · VIETŅU TOP
JAUNĀKAIS FORUMĀ · BIEDRU SARAKSTS · INFO MEKLĒTĀJS · IZSEKOTĀS TĒMAS · NOBALSO


Ierakstus pievienot var tikai reģistrējies lietotājs!
  UWM AKTUĀLI: DISKUSIJA: Reputācijas restarts - DISKUSIJA: Steam spēļu izloze - NODERĪGI: "CW sistēma" uCoz modulī
  • Lappuse 1 no 1
  • 1
uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » LIETOTĀJU WEB MATERIĀLI » Teksta parādīšanās uzejot ar kursoru uz bildes
Teksta parādīšanās uzejot ar kursoru uz bildes
Antikrists
Piektdiena, 07.10.2016, 8:05:09 | Ieraksts #1
FORUMA APSARGS
Foruma ieraksti: 602

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis


Jaunākie apbalvojumi:


@Antikrists raksta .. :

Matereālu izskats jebkuram modulim.

Code
<style type="text/css" rel="stylesheet">
#bo1xe {margin:10px; font-size:13px; color:#f9f9f9;}
#bo2xe {margin:5px; font-size:19px; color:#f1f1f1;}
#bonxe {position:relative; width:325px; height:325px; z-index:1; overflow:hidden; margin:5px; border:5px solid #cdcdcd; background:#131313;}
#bonxe img {position:absolute; width:325px; height:325px; z-index:2;}
</style>

<script type="text/javascript">$(function(){$("#bonxe").hover(function(){$(this).find("img").stop().animate({top:-325},500);},function(){$(this).find("img").stop().animate({top:0},500);});});</script>

<div id="bonxe">
<img src="$IMG_URL1$">
<div id="bo1xe">
<b id="bo2xe"><a href="$ENTRY_URL$">$TITLE$</a></b>
<p>$BRIEF$</p>
</div></div>


Ja vēlies izmantot kā es līdzīgu matereālu izskatu faq modulim par faktiem un nepieciešama bilde plata tad izmaini šos izmērus uz vajadzīgajiem - width:325px; height:325px

$BRIEF$ aizstāj ar $MESSAGE$

Un tamlīdzīgi pēc saviem ieskatiem ko un kā vajag.

Iznākums -







-------------------------------
-------------------------------

Vēlviens līdzīgs tik otrādi, uzej uz teksta un bilde parādas.
Arī var izmantot jebkuram modulim, bet es priekšroku devu kā pirmīt minēju Faq modulim.

Code
<style>/* Materialu izskats */
.vidnews {border-bottom: 1px solid #eee; margin-bottom: 10px;opacity:0.9;}
.vidnews:hover {border-bottom: 1px solid #eee; margin-bottom: 10px;opacity:1;}
.imgbigload {display: block;box-shadow: 0px 0px 15px rgba(0,0,0,0.04);border-radius:5px; background-size: cover; position: relative; margin: 0; background-size: cover; width: 640px; height: 480px;}
.imgbigload:hover {box-shadow: 0px 0px 15px rgba(0,0,0,0.04);}
.loaddates {background:#333;padding-left:10px;padding-right:10px;position: absolute; bottom: 10px; left: 20px; color:#fff; font-size: 14px; }
.loadsave {opacity:0.5;border-radius:5px;position: absolute; bottom: 10px; left: 10px; background: #333; padding: 3px 15px; font-size: 13px; }
.loadsave:hover {opacity:0,9;background: #444;border-radius:5px;}
.loadsave a {color:#fff; }

.title1 a {color: #fff;text-shadow: 0 1px 2px #222;}
.title1 a:hover {color: #efefef;text-shadow: 0 1px 2px #222;}
.title1 {margin-bottom: 12px;padding-left: 5px;font-size: 17px;line-height: 1.333;font-weight: bold;color: #444;padding: 20px;}

.brief1 {opacity: 8.1;position: absolute;transition: all 0.7s ease 0s;background-color: rgba(0, 0, 0, 0.85);width: 100%;height: 100%;border-radius:5px;}
.brief1:hover {opacity: 0;}
.brief1 a {color:#fff;}
/* end */</style>

<div style="width:100%;float:left;">
<div class="vidnews">
<div class="imgbigload" style="background-image: url('$IMG_URL1$'); margin: 15px 0;">
<div class="brief1" style="cursor:pointer;" onclick="location.href='$ENTRY_URL$'"> <p style="color: rgb(255, 255, 255); padding: 57px;"><span style="font-size:19pt"><?substr($MESSAGE$,0,200)?></span></p></div>
<div class="loadnames"> <div class="title1 textadapr" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?></div> </div>
</div>
</div>
</div>


Iznākums -





----------------------------
----------------------------

Un vēlviens matereālu izskats kas gan ir jāparediģē gan css liekā satura ziņā, gan
un taml.

Izmantots atziņām, bet slinkuma pēc ir atstāts kā ir ar visām kļūdām.

Kam nebūs slinkums savedīs kārtībā.

Code
<style>

figure{
position:relative
}
figcaption{
position:absolute;
top:0;
left:0;
}

.primerfigursstt{
position:relative;
display:inline-block;
}
.primerfigurssttC{
opacity:5;
position:absolute;
top:0;
left:0;
background: rgba(0,0,0,.5);
width:540px;
height:500px;
color:#fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
font: 11px Tahoma;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.primerfigursstt:hover .primerfigurssttC{
opacity: 3 !important;
}
</style>

<center><div class="box-news"> <br><br>$MODER_PANEL$<br><BR><div>

<BR><BR><BR><BR><BR>
<center>
<figure class="primerfigursstt">
<img src="$IMG_URL1$" style="width:539px;height:500px;"> </a>
<figcaption class="primerfigurssttC">
<div style="padding:10px;">
<div style="font:bold 28px Tahoma"><BR><BR><BR><BR><BR><BR><BR><center>$MESSAGE$</center><BR><BR><BR></div>

</div>
</figcaption>
</figure> </center>

<center><BR><b><a href="$ENTRY_URL$">Nr.$TITLE$</b></a><BR><BR>

<iframe height="20" width="84" frameborder="0" src="http://www.draugiem.lv/say/ext/like.php?title=$CATEGORY_NAME$ atziņas&url=http://Tavsweb.lv/$ENTRY_URL$&titlePrefix=Tava web nosaukums"></iframe>

<BR></center> <BR>

<div class="data-news"><a href="$ENTRY_URL$" class="poshytips button-more" title="Tālāk"></a><center>Kategorija: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></center></div>
<BR><BR></div> <BR></div>
<br><BR><BR>
<style>

/* Atzinas */
.news-info {
overflow: hidden;
}
.news-info > .left {
float: left;
margin-right: 15px;
}
.news-info > .left + .right {
margin-left: 565px;
}
.news-info .image {
float: left;
padding: 10px 10px 0 10px;
margin: 0 0 -4px 0;
text-align: center;
position: relative;
z-index: 0;
border-left: 5px solid #d2d2ce;
border-top: 5px solid #d2d2ce;
border-right: 5px solid #d2d2ce;
}
.news-info .image img {
border: 5px solid #d2d2ce;
padding: 0;
}
.news-info .data-news {
clear: both;
border-left: 1px solid #d2d2ce;
border-right: 1px solid #d2d2ce;
border-bottom: 1px solid #d2d2ce;
margin: -8px 0 20px 0;
}
.news-info .data-news .info-news {
margin: 0 10px 10px 10px;
text-align: center;
overflow: auto;
background: #f8f8f8;
border-left: 1px solid #d2d2ce;
border-right: 1px solid #d2d2ce;
border-bottom: 1px solid #d2d2ce;

}
.news-info .description {
padding: 0;
margin-bottom: 15px;
line-height: 20px;
color: #3333333;
}
.news-info .review {
color: #4D4D4D;
border: 1px solid #d2d2ce;
padding: 8px;
line-height: 20px;
}
.box-news-images {
width: 100%;
overflow: hidden;
text-align: center;
}
.box-news-images > div {
position: relative;
width: 570px;
display: inline-block;
vertical-align: top;
margin: 0;
text-align: center;
background: #eee;
padding: 7px;
overflow: hidden;
border: 1px solid #d2d2ce;
margin: 13px 4px 0 4px;
}
.box-news-images > div:hover {
background: #e2e2e2;
}
.box-news-images .image {
width: 100%;
border: 1px solid #d2d2ce;
background: #FFFFFF;
}
.box-news-images .image img {
opacity: .8;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.box-news-images .image img:hover {
opacity: 1;

}
.product-list .top {
padding-top: 10px;
}
.product-list .data-news {
height: 28px;
border-left: 1px solid #d2d2ce;
border-right: 1px solid #d2d2ce;
border-bottom: 1px solid #d2d2ce;
margin-bottom: 0;
background: #f8f8f8;
float: left;
clear: both;
}

.product-grid a.button-more, .box-news a.button-more {
background: #f8f8f8 url('http://i.imgur.com/neR1bF4.png') no-repeat right center;
width: 30px;
height: 28px;
display: block;
float: right;
}
/* box-news */
.box-news {

}
.box-news > div {
position: relative;
width: 624px;
display: inline-block;
vertical-align: top;
margin: 0;
text-align: center;
background: #eee;
padding: 7px;
overflow: hidden;
border: 1px solid #d2d2ce;
margin: 13px 4px 0 4px;
float: left;
}
.box-news > div:hover {
background: #e2e2e2;
}
#column-left .box-news > div {
width: 624px;
margin: 13px 0 0 0;
}
#column-right .box-news > div {
width: 624px;
margin: 13px 0 0 0;
}
#column-left + #content .box-news > div {
width: 624px;
}
#column-right + #content .box-news > div {
width: 624px;
}
#column-left + #column-right + #content .box-news > div {
width: 624px;
}
.box-news .image {
display: block;
margin-bottom: 0px;
position: relative;
border: 1px solid #d2d2ce;
background: #FFFFFF;
}
.box-news .image img {
width: 622px;
height: 622px;
position: relative;
padding: 0;
z-index: 5;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.box-news .image img:hover {
opacity: 0.1;
}
.box-news .description-image{
position: absolute;
margin: 7px;
padding: 10px;
text-align: left;
color: #222222;
top: 0;
left: 0;
z-index: 1;
}
.box-news .description {
height: 530px;
background: #F3F3F3;
padding: 7px;
overflow: hidden;
border: 1px solid #d2d2ce;
text-align: left;
color: #222222;
}
.box-news .name {
border-left: 1px solid #d2d2ce;
border-right: 1px solid #d2d2ce;
height: 30px;
padding: 5px;
}
.box-news .name a {
color: #333;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
text-decoration: none;
display: block;
clear: both;
}
.box-news .data-news {
height: 28px;
border: 1px solid #d2d2ce;
background: #f8f8f8;
}
.box-news .data-news .info {
float: right;
}

</style>



Iznākums -

Pielikumi: 7917928.png(451.4 Kb) · 1570544.png(447.4 Kb) · 0423959.png(446.0 Kb) · 2420198.png(466.7 Kb) · 9851470.png(473.0 Kb)



.
.


uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » LIETOTĀJU WEB MATERIĀLI » Teksta parādīšanās uzejot ar kursoru uz bildes
  • Lappuse 1 no 1
  • 1
Meklēšana:

UWM apmeklēja:

RESPEKTABLĀKIE PORTĀLA FORUMA KLAVIATŪRISTI :
Foruma viszinis
Korijs
UWM karma: 380
Foruma atkarīgais
wuxmachine
UWM karma: 157
Foruma atkarīgais
Robiits
UWM karma: 87
Foruma šamanis
0wn3r
UWM karma: 80
Foruma atkarīgais
H[o_0]LiGaN
UWM karma: 78
Foruma atkarīgais
Spanky
UWM karma: 76
Foruma viszinis
Ar4ssS
UWM karma: 74
Foruma atkarīgais
Profth3tic
UWM karma: 55
Foruma atkarīgais
emciits
UWM karma: 52
Foruma atkarīgais
JackDaniel
UWM karma: 51
Foruma atkarīgais
Antikrists
UWM karma: 51
Foruma atkarīgais
Ken_D
UWM karma: 50
Ielāde...