The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Avatar grayscale filter on hover

View previous topic View next topic Go down

Solved Avatar grayscale filter on hover

Post by Octi October on September 10th 2016, 10:47 am

Hi,
I would like to add an avatar hover effect to the CSS sheet:
avatars go from full color to grayscale.
If anyone can help me with the CSS code making the avatars (next to replies) gray on hover, it would be very much appreciated.

The forum version is phpBB2.

Thank you in advance!


Last edited by Octi October on September 11th 2016, 7:57 am; edited 1 time in total

Octi October
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : Still in the galaxy...

http://lasvegas.hungarianforum.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Luffy on September 10th 2016, 10:55 am

Hello @Octi October,

Can you post here your viewtopic_body template please?

Thanks!






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Octi October on September 10th 2016, 11:02 am

@Luffy wrote:Hello @Octi October,

Can you post here your viewtopic_body template please?

Thanks!

Here it is:

Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
   _atc.cwait = 0;
   $('.addthis_button').mouseup(function(){
      if ($('#at15s').css('display') == 'block') {
         addthis_close();
      }
   });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>
      <td align="left" valign="middle" nowrap="nowrap">
         <!-- BEGIN switch_twitter_btn -->
         <span id="twitter_btn" style="margin-left: 6px; ">
         <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
         <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
         </span>
         <!-- END switch_twitter_btn -->
         <!-- BEGIN switch_fb_likebtn -->
         <span id="fb_likebtn" style="margin-left: 6px; ">
            <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
         </span>
         <!-- END switch_fb_likebtn -->
      </td>
      <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
         <span class="gensmall bold">
            <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
            <!-- BEGIN switch_plus_menu -->
            &nbsp;|&nbsp;.
            <script type="text/javascript">//<![CDATA[
               var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
               var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
               var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
               var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
               var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
               var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
               insert_plus_menu('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
            <!-- END switch_plus_menu -->
         </span>
      </td>
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
   <tr align="right">
      <td class="catHead" colspan="3" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint">&nbsp;</td>
               <td align="center" class="t-title">
                  <h1 class="cattitle">&nbsp;{TOPIC_TITLE}</h1>
               </td>
               <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;</td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <div class="profil"><br /><span class="karinev">{postrow.displayed.POSTER_NAME}<br /></span><br />{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><a name="{postrow.displayed.U_POST_ID}"></a>
                          <br />
                          <div class="eltunik"><span class="passion" style="font-weight:bold;">WHAT HAPPENS IN VEGAS <br/>▼ STAYS IN VEGAS ▼</span><br />
                            <div class="lenyilik mini"><span class="postdetails poster-profile">
                                  {postrow.displayed.POSTER_RANK}<br /><br />
            <!-- BEGIN profile_field -->
                                  <div style="text-align: left; padding-left: 10px;">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br /></div></div>
                            <center><span class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="baseline">
                                          <div align="right" style="margin-left: 100px;">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}</div>
               </td>
            </tr>
         </table>
                              </span></center>
         
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
               <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
               </td>
            </tr>
            <tr>
               <td colspan="2" class="hr">
                  <hr />
               </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

                     <!-- BEGIN switch_bar -->
                     <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                     <!-- END switch_bar -->

                     <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                     <!-- END switch_no_bar -->

                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                     <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="postbody">

                     <div>{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                     <div class="clear"></div>
                     <!-- BEGIN switch_signature -->
                     <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                     </div>
                     <!-- END switch_signature -->

                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
         <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
   </tr>
   <!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   <tr align="right">
      <td class="catBottom" colspan="3" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint">&nbsp;</td>
               <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
               <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
         </table>
      </td>
   </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
   <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><h1 class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</h1></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><h1 class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</h1></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td class="row2 postbody" valign="top">
         <!-- BEGIN link -->
         »&nbsp;<a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
         <!-- END link -->
      </td>
   </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
   <tbody>
      <tr>
         <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <td valign="top">
                        <h1 class="cattitle">&nbsp;{L_FORUM_RULES}</h1>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
      <tr>
         <td class="row1 clearfix">
            <table>
               <tr>
                  <!-- BEGIN switch_forum_rule_image -->
                  <td class="logo">
                     <img src="{RULE_IMG_URL}" alt="" />
                  </td>
                  <!-- END switch_forum_rule_image -->
                  <td class="rules postbody">
                     {RULE_MSG}
                  </td>
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <!-- BEGIN show_permissions -->
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  <!-- END show_permissions -->
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <!-- BEGIN viewtopic_bottom -->
      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}:&nbsp;{S_JUMPBOX_SELECT}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span></td>
      <!-- END viewtopic_bottom -->

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
         <span class="gensmall">&nbsp;</span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Octi October
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : Still in the galaxy...

http://lasvegas.hungarianforum.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Luffy on September 10th 2016, 11:15 am

Please replace it with this one:
Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
  _atc.cwait = 0;
  $('.addthis_button').mouseup(function(){
      if ($('#at15s').css('display') == 'block') {
        addthis_close();
      }
  });
});
 
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
     
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
        {
            if( $(this).is(":visible") )
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
        });
        }
    }
    catch(e) { }
 
  return false;
};
 
//]]>
</script>
 
<table width="100%" border="0" cellspacing="2" cellpadding="0">
  <tr>
      <td align="left" valign="middle" nowrap="nowrap">
        <span class="nav">
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
        <!-- END switch_user_authreply -->
        </span>
      </td>
      <td align="left" valign="middle" nowrap="nowrap">
        <!-- BEGIN switch_twitter_btn -->
        <span id="twitter_btn" style="margin-left: 6px; ">
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        </span>
        <!-- END switch_twitter_btn -->
        <!-- BEGIN switch_fb_likebtn -->
        <span id="fb_likebtn" style="margin-left: 6px; ">
            <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
        </span>
        <!-- END switch_fb_likebtn -->
      </td>
      <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
        <span class="gensmall bold">
            <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
            <!-- BEGIN switch_plus_menu -->
            &nbsp;|&nbsp;.
            <script type="text/javascript">//<![CDATA[
              var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
              var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
              var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
              var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
              var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
              var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
              insert_plus_menu('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
            <!-- END switch_plus_menu -->
        </span>
      </td>
  </tr>
</table>
 
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
  <tr align="right">
      <td class="catHead" colspan="3" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint">&nbsp;</td>
              <td align="center" class="t-title">
                  <h1 class="cattitle">&nbsp;{TOPIC_TITLE}</h1>
              </td>
              <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;</td>
            </tr>
        </table>
      </td>
  </tr>
  <!-- BEGIN topicpagination -->
  <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END topicpagination -->
  {POLL_DISPLAY}
  <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
  </tr>
  <!-- BEGIN postrow -->
  <!-- BEGIN hidden -->
  <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
  </tr>
  <!-- END hidden -->
  <!-- BEGIN displayed -->
  <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <div class="profil"><br /><span class="karinev">{postrow.displayed.POSTER_NAME}<br /></span><br />{postrow.displayed.RANK_IMAGE}<span class="avatImg">{postrow.displayed.POSTER_AVATAR}<span><br /><a name="{postrow.displayed.U_POST_ID}"></a>
                          <br />
                          <div class="eltunik"><span class="passion" style="font-weight:bold;">WHAT HAPPENS IN VEGAS <br/>▼ STAYS IN VEGAS ▼</span><br />
                            <div class="lenyilik mini"><span class="postdetails poster-profile">
                                  {postrow.displayed.POSTER_RANK}<br /><br />
            <!-- BEGIN profile_field -->
                                  <div style="text-align: left; padding-left: 10px;">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
        </span><br /></div></div>
                            <center><span class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="baseline">
                                          <div align="right" style="margin-left: 100px;">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}</div>
              </td>
            </tr>
        </table>
                              </span></center>
       
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
              <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
              </td>
            </tr>
            <tr>
              <td colspan="2" class="hr">
                  <hr />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                    <!-- END switch_vote -->
 
                    <!-- BEGIN switch_bar -->
                    <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->
 
                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                    </div>
                    <!-- END switch_bar -->
 
                    <!-- BEGIN switch_no_bar -->
                    <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                    <!-- END switch_no_bar -->
 
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                    <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->
 
                  <div class="postbody">
 
                    <div>{postrow.displayed.MESSAGE}</div>
 
                    <!-- BEGIN switch_attachments -->
                    <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                          <!-- BEGIN switch_post_attachments -->
                          <dl class="file">
                              <dt>
                                <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />
 
                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->
 
                                <!-- BEGIN switch_no_dl_att -->
                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                              </dt>
 
                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->
 
                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->
 
                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                          </dl>
                          <!-- END switch_post_attachments -->
                        </dd>
                    </dl>
                    <!-- END switch_attachments -->
 
                    <div class="clear"></div>
                    <!-- BEGIN switch_signature -->
                    <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                    </div>
                    <!-- END switch_signature -->
 
                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
              </td>
            </tr>
        </table>
      </td>
  </tr>
  <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
        <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
  </tr>
  <!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
  </tr>
  <!-- END first_post_br -->
  <!-- END displayed -->
  <!-- END postrow -->
  <!-- BEGIN no_post -->
  <tr align="center">
      <td class="row1" colspan="3" height="28">
        <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
  </tr>
  <!-- END no_post -->
  <tr align="right">
      <td class="catBottom" colspan="3" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint">&nbsp;</td>
              <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
              <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
        </table>
      </td>
  </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
  <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
  </tr>
  <!-- BEGIN switch_user_logged_in -->
  <!-- BEGIN watchtopic -->
  <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
  </tr>
  <!-- END watchtopic -->
  <!-- END switch_user_logged_in -->
</table>
 
<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
  <tr>
      <td class="catBottom" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="top"><h1 class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</h1></td>
              <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
            </tr>
        </table>
      </td>
  </tr>
</table>
 
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
  <tr>
      <td class="catBottom" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="top"><h1 class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</h1></td>
              <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
            </tr>
        </table>
      </td>
  </tr>
  <tr>
      <td class="row2 postbody" valign="top">
        <!-- BEGIN link -->
        »&nbsp;<a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
        <!-- END link -->
      </td>
  </tr>
</table>
<!-- END promot_trafic -->
 
<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
  <tbody>
      <tr>
        <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                  <tr>
                    <td valign="top">
                        <h1 class="cattitle">&nbsp;{L_FORUM_RULES}</h1>
                    </td>
                  </tr>
              </tbody>
            </table>
        </td>
      </tr>
      <tr>
        <td class="row1 clearfix">
            <table>
              <tr>
                  <!-- BEGIN switch_forum_rule_image -->
                  <td class="logo">
                    <img src="{RULE_IMG_URL}" alt="" />
                  </td>
                  <!-- END switch_forum_rule_image -->
                  <td class="rules postbody">
                    {RULE_MSG}
                  </td>
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
</table>
<!-- END switch_forum_rules -->
 
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
        <!-- BEGIN switch_user_logged_in -->
        <a name="quickreply"></a>
        {QUICK_REPLY_FORM}<br />
        <!-- END switch_user_logged_in -->
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
        <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
        <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <!-- BEGIN show_permissions -->
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  <!-- END show_permissions -->
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
</table>
 
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
        <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
        </span>
      </td>
 
      <!-- BEGIN viewtopic_bottom -->
      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}:&nbsp;{S_JUMPBOX_SELECT}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span></td>
      <!-- END viewtopic_bottom -->
 
      <!-- BEGIN moderation_panel -->
      <td align="center">
        <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
        <span class="gensmall">&nbsp;</span>
      </td>
      <!-- END moderation_panel -->
  </tr>
</table>
</form>
 
<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
        <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />
 
            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
 
            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
        </form>
      </td>
  </tr>
</table>
<!-- END viewtopic_bottom -->
 
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>
Save and publish the template.

and add this code in your CSS:
Code:
.avatImg img:hover {
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
}
.avatImg img {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
}






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Octi October on September 10th 2016, 11:37 am

I've done it, but nothing happens. :/

Octi October
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : Still in the galaxy...

http://lasvegas.hungarianforum.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Luffy on September 10th 2016, 11:50 am

Okay,

In your CSS you have this code:
Code:
.profil img {
  border: 1px dotted #fff;
  max-width: 200px;
}
i would suggest changing that code to this one:
Code:
.profil img {
  border: 1px dotted #fff;
  max-width: 200px;
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
}
and add the hover one:
Code:
.profil img:hover {
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
}






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Octi October on September 10th 2016, 12:05 pm

In the main CSS sheet in colors or in the viewtopic_body template?

I've changed the code in the main CSS in colors then I added your "hover" code after it but still nothing happens.
Maybe I did something wrong.

Octi October
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : Still in the galaxy...

http://lasvegas.hungarianforum.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Luffy on September 10th 2016, 12:08 pm

In the CSS.






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Octi October on September 10th 2016, 12:10 pm

This is my CSS sheet:
Is there an exact place in it where I should add your codes?

Code:
.chatbox_row_1 {
background : #8D8487;
}
 
.chatbox_row_2 {
background : #989093;
}

#i_logo {
    width: 85%;
    min-width: 1000px;
    margin-right: 6px;
}


.beleponev {
  font-family: 'Open Sans', cursive;
  font-weight: 400;
  font-rotate: -50;
  text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgb(84, 78, 68) 0px 0px 3px;
  font-size: 18px;
}

/*PAGRINDINÄ– LENTA*/
.bodylinewidth{
margin-top: auto
margin-bottom: 3px;
width: 1050px;
}

body {
  background-color: #8A7171;
}

td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides {
  background-color: rgba(0, 0, 0, 0);
  background-image: url(http://illiweb.com/fa/empty.gif);
  border-width: 0px;
  border-style: solid;
  height: 28px;
}

.bodyline{
  background-color: #8A7171;
  border-radius: 35px;
  box-shadow: 1px 1px 30px 0px #000000 inset;
}

/*alap-forum*/

.forumline{
  background-color: #928A8D;
  border-radius: 30px;
  box-shadow: 1px 1px 30px 0px #000000 inset ;
  padding: 7px;
  margin-top: 10px;
  margin-bottom: 10px;
}

a.forumlink {
  text-decoration: none;
  border-width: 0px 0px 1px 0px;
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-size: 24px;
  font-weight: lighter;
  display:block;
  text-align: center;
  margin-bottom: 0px;
  text-shadow: 0 1px 1px #000, 0 0 3px black;
}

a.forumlink:hover{
-moz-border-radius: 7px 7px 7px 7px;
font-family: 'Lobster', cursive;
font-variant: capitalize;
font-size: 24px;
font-weight: lighter;
text-decoration:none;
display:block;
text-align: center;
text-shadow: 0 1px 1px #000, 0 0 3px black;
}

a:link, a:visited {
  text-decoration: none;
}

a:hover{
  -o-transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  text-shadow: 1px 0px 4px #664343;
  font-style: italic;
  text-decoration: none!important;
}


/*dőlt*/
i {color:#0A474A; font: normal 12px Georgia; font-style: italic;}

/*scrollbar*/
::-webkit-scrollbar {
margin-right: 2px;
background-color: #928A8D;
width: 10px;
}

.mini::-webkit-scrollbar {
width: 5px;
}

::-webkit-scrollbar:horizontal {
  margin-right: 2px;
background-color: #928A8D;
height: 7px;
}

::-webkit-scrollbar-thumb {
background: #3E3E3E;
  -webit-transition: all .3s ease-out;
transition: all .3s ease-out;
}

::-webkit-scrollbar-track {
-webit-box-shadow: 0 0 2px #000;
}

/*nyilacskák*/
.updownbutton {
  position:fixed;
  bottom:20px;
  right:30px; /* replace right with left to display the buttons on the left */
  z-index:100;
}

.updownbutton img {
  filter:alpha(opacity=70);
  -khtml-opacity:0.7;
  -moz-opacity:0.7;
  opacity:0.7;
}

.updownbutton img:hover {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
}

/*lastpost*/
.lastpost {
  width: 300px;
  height: 105px;
  padding: 5px;
  font-size: 12px;
  border-radius: 5px;
  border: 2px solid #171b1a;
  box-shadow: 0 0 2px #0d0d09, 0 0 50px #000000 inset;
  text-align: center;
  margin: 5px;
  text-shadow: 0 1px 1px #000;
  position: relative;
  margin-top: 10px;
}


.lastpostbel {
  max-width: 220px;
  border: 2px solid #171b1a;
  border-radius: 5px;
  margin-left: 30%;
  padding: 3px;
  box-shadow: 0 0 2px #0d0d09, 0 0 10px #000000 inset;
}

.lastcím {
  font-size: 13px;
  text-transform: lowercase;
  text-shadow: 1px 1px 0 #000, 0 0 4px #582E28!important;
  font-style: italic;
  width: 200px;
}

.lastpost-avatar{
  padding: 3px;
}

.lastpost-avatar img {
  border-radius: 5px;
  background-color: #928A8D;
  box-shadow: 0 0 3px #776546;
  border: 2px solid #171b1a;
  background: ;
  padding: 3px;
  position: absolute;
  width: 58px;
  height: auto;
  margin-top: -3px;
  margin-left: 0px;
}


/*lenyílós profil*/
.profil {
  width: 230px;
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  background-color: ;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow:  0 0 10px #000 inset;
  border-radius: 250px 15px 15px 250px;
}
 
.profil img {
  max-width: 200px;
  border: 1px dotted white;
}


.passion {
  display: block;
  text-align:center;
  color: #0A474A;
  font-size: 9px;
  letter-spacing: 2px;
}

.eltunik {
  height: 28px;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  overflow: hidden;
  text-align: center;
  padding-bottom: 5px;
}

.lenyilik {
  height: 0px;
}

.eltunik:hover {
  height: 300px;
  background-color: none;
  line-height: 100%;
  margin-right: 10px;
  margin-left: 10px;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
}

.eltunik:hover .lenyilik {
  height: 300px;
  overflow: auto;
}

.eltunik .lenyilik img {
  border-top-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
}

.karinev{
  font-family:'Open Sans', cursive;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgb(84, 78, 68) 0px 0px 3px;
}

.karinev a:hover{
  text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgba(3, 43, 30, 1) 0px 0px 3px;
}

.postdetails.poster-profile a img {
border: 8px solid #705655;
-moz-border-radius:8px;
background-color:#705655;
}

/*ki van itt?*/
.statki {
  background-color: #928A8D;
  margin-top: -20px;
  margin-left: 14px;
  width: 320px;
  height: 120px;
  padding: 8px;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  box-shadow: rgba(33, 24, 17,0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  overflow: auto;
}

.statstat {
  background-color: #928A8D;
  margin-top: -47px;
  margin-left: 14px;
  width: 285px;
  height: 300px;
  padding: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  border-radius: 5px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  text-align: center;
  box-shadow: rgba(33, 24, 17,0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  overflow: auto;
}

.új_user strong {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  letter-spacing: -2px;
  line-height: 50%;
  text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
  text-transform: capitalize;
}

.mennyie strong {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
  letter-spacing: -2px;
line-height: 50%;
  text-align: center;
text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
}

.mennyi {
font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  text-align: center;
  }

.creditek {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  text-transform:;
  text-shadow: 0 1px 1px #000;
  text-align: justify;
  text-transform: none;
  overflow: auto;
  padding: 10px;
  }

.csopi {
  width: 130px;
  height: 13px;
  padding: 3px;
  margin-right: -10px;
  border-radius: 5px;
  letter-spacing: .3px;
  font-size: 12px;
  text-align: left;
  background-color: #928A8D;
box-shadow: 0 0 1px #000, inset 0 0 10px #000;
font-family: 'Open Sans', sans-serif;
  border-bottom: 1px solid #444444;
  }

.ki_ki {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
}

/*menüsor*/
.userbar {
  position: fixed;
  top: -5px;
  left: 20px;
  right: 5px;
  background-color: #928A8D;
  border: 1px solid #232323;
  box-shadow: -2px -2px 1px 1px #232323 inset;
  padding: 6px; width: 95%;
  border-radius: 35px/108px;
  z-index: 3;
}

a.mainmenu {
  -moz-text-shadow: #000 0 1px 1px;
  -o-transition: all 1s cubic-bezier(0.27,0.1,0.27,1) 0;
  display: inline-block;
  font-family: 'Lobster', cursive;
  font-size: 15px;
  text-shadow: 0 1px 1px #fff, 0 0 3px black;
  text-transform: lowercase;
}

a.mainmenu:hover {
  font-family: 'Lobster', cursive;
  font-size: 15px;
  text-transform: lowercase;
  color: #fff;
  text-shadow: 0 1px 1px #000, 0 0 3px #ffffff;
}

a.cattitle {
  font-family: 'Times new roman', sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 2px 2px #000;
  text-decoration: none;
  display:block;
}


/*szövegtörzs*/
.postbody{
  text-align: justify;
  padding: 20px;
}

.postbody a {
  color: #380023!important;
}

.msg {
color: #a6a3a3;
  font-size: 13px;
}

/*widget*/
.module-title {
  color: white;
  border-width: 0px 0px 1px 0px;
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-weight: 400;
  font-rotate: -50;
  text-transform: lowercase;
  text-shadow: 0 1px 1px #000, 0 0 3px black;
  font-size: 24px;
}

.forumrész_doboz {
 width: 350px;
 padding: 10px;
 border-radius: 10px;
 background-color: #928A8D;
 box-shadow: 0px 0px 2px #000, 0px 0px 20px #000 inset;
}


/*kúp*/
.felso {
  background-color: #928A8D;
  border-radius: 500px 500px 0px 0px / 100px;
  border: 3px solid #000000;
  box-shadow: 0 0 5px black, 0 0 10px black inset;
  margin-bottom: -30px;
  margin-top: 10px;
  margin-left: 9px;
  width: 500px;
  height: 80px;
}

h2 {
color: #580606!important;
font-size: 40px;
margin-bottom: -4px;
margin-top: 40px;
text-align: center;
text-shadow:1px 1px #EEEEEE, 2px 2px 6px #EEEEEE,-1px -1px #EEEEEE,-2px -2px 6px #EEEEEE,-1px 1px #EEEEEE,-2px 2px 6px #EEEEEE,1px -1px #EEEEEE,2px -2px 6px #EEEEEE;
letter-spacing: -1px;
}

.secondarytitle h2 {
  font-family: Shelby;
  font-weight: 400;
}

.forumrész_doboz {
width: 350px;
padding: 10px;
border-radius: 10px;
background-color:#2b1820;
box-shadow: 0px 0px 2px #000, 0px 0px 20px #000 inset;
 }

/*felsőtábla*/
.felso_cim {
  text-shadow: 1px 1px white, 0 6px 8px #000;
  font-family: 'Bangers', cursive;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  line-height: 60%;
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  position: ;
  bottom: 0;
  width: 20px;
  height: 70px;
}

.quickie_cim {
  text-shadow: 1px 1px #939393, 2px 2px #939393, 0 6px 8px #3E3E3E;
  font-family: 'Bangers', cursive;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  line-height: 60%;
  writing-mode: tb-rl;
  letter-spacing: -1px;
  white-space: nowrap;
  display: inline-block;
  position: ;
  bottom: 0;
  margin-left: 176px;
  width: 20px;
  height: 70px;
}

.news_cim {
  text-shadow: 1px 1px white, 0 6px 8px white;
  font-family: 'Bangers', cursive;
  font-size: 29px;
  font-weight: 400;
  text-align: center;
  border-bottom: 1px dotted #444444;
  line-height: 60%;
}

.canon_cim {
  text-shadow: 1px 1px white, 0 6px 3px #000;
  font-family: 'Bangers', cursive;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  border-bottom: 1px dotted #444444;
  line-height: 60%;
  padding-top: 8px;
}

.felso_tableble {
  width: 210px;
  height: 140px;
  background-color: #928A8D;
  padding: 5px;
  border-top: 10px solid #3E3E3E;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent/* CSS by srmark */;
  border-bottom: 10px solid #3E3E3E;
  -moz-border-top-colors: #3E3E3E;
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: #3E3E3E;
  -moz-border-radius: 50px/* CSS by srmark */;
  overflow: auto;
  text-align: justify;
  font-family: 'Oswald', cursive;
  margin-left:-35px;
  margin-top: 15px;
}

.quickie_tableble{
  width: 210px;
  height: 75px;
  background-color: #928A8D;
  padding: 5px;
  overflow: auto;
  text-align: justify;
  font-family: 'Oswald', cursive;
  margin-left:-30px;
  margin-top:15px;
}
 
.felsotable1 {
  width: 250px;
  height: 426px;
  background-color: #928A8D;
  padding: 5px;
  border-top: 10px solid #3E3E3E;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent/* CSS by srmark */;
  border-bottom: 10px solid #3E3E3E;
  -moz-border-top-colors: #3E3E3E;
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: #3E3E3E;
  -moz-border-radius: 50px/* CSS by srmark */;
  text-shadow: 0 1px 1px #000;
  font-size: 11px;
  text-align: justify;
  margin-top: 5px;
  margin-left: 6px;
}

.felsotable2 {
  width: 340px;
  height: 260px;
  background-color: #C2BB94;
  padding: 5px;
  border-top: 10px solid #3E3E3E;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent/* CSS by srmark */;
  border-bottom: 10px solid #3E3E3E;
  -moz-border-top-colors: #3E3E3E;
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: #3E3E3E;
  -moz-border-radius: 50px/* CSS by srmark */;
  font-size: 11px;
  text-align: justify;
  margin-top: 5px;
  margin-left: 6px;
  z-index: 1;
}

.felsotable2vid {
  width: 330px;
  background-color: black;
  line-height: 115%;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  text-shadow: 0 1px 1px #000;
  font-size: 11px;
  text-align: justify;
  margin-top: 5px;
  margin-left: 6px;
  padding-left: 20px;
}

.felso_cim2 {
  font-family: 'Playfair Display', serif;
  text-shadow: 0 1px 1px #000;
  letter-spacing: -1px;
  color: #b4a08d;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.infostaff {
  display: inline-block;
  margin-left: 14px;
  box-shadow: 0 0 1em #212020;
  margin-top: 20px;
  vertical-align: top;
}

.iblock {
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  margin-top: -65px;
  font-size: 9px;
  line-height:190%;
  font-weight:bold;
  text-transform: uppercase;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

.infostaff > div {
  -moz-transform: scale(0.2) rotate(-60deg);
  -moz-transition: all .3s linear;
  -o-transform: scale(0.2) rotate(-60deg);
  -o-transition: all .3s linear;
  -webkit-transform: scale(0.2) rotate(-60deg);
  -webkit-transition: all .3s linear;
  margin-left: 10px;
  opacity: 0;
  position: absolute;
  transform: scale(0.3) rotate(-60deg);
  transition: all .3s linear;
}

.kozlemeny2 {
  background-color: #928A8D;
  border-radius: 5px;
  box-shadow: 0 0 25px 2px #000 inset;
  width: 120px;
  height: 50px;
  z-index: 2;
}

.infostaff:hover > div {
  -moz-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  -webkit-transform: scale(1) rotate(0deg);
  opacity: 1;
  transform: scale(1) rotate(0deg);
  visibility: visible
}

.nevek {
  font-family: 'Playfair Display', serif;
  color: #b4a08d;
  font-size: 20px;
  text-align: center;
  letter-spacing: -1px;
  text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
  border-bottom: 2px dotted #232323;
}

.privi {
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -1px;
  text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
}

a.forumlink {
  text-decoration: none;
  border-width: 0px 0px 1px 0px;
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-size: 24px;
  font-weight: lighter;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-bottom: 0px;
  text-shadow: 0 1px 1px #000, 0 0 3px black;
}

a.forumlink:hover {
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-variant: capitalize;
  font-size: 24px;
  font-weight: lighter;
  text-decoration: none;
  display: block;
  text-align: center;
  text-shadow: 0 1px 1px #000, 0 0 3px #ffffff;
}

.botommargin {
  margin-bottom: 5px;
}

.canonlist {
    overflow-x: auto;
    height: 200px;
    margin-top: 15px;
}

.canon {
  float: left;
  height: 190px;
  min-height: 130px;
  position: relative;
  width: 100px;
  margin-left: 5px;
}

.canon .overlay {
  background: rgba(0, 0, 0, 0.4);
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}

.canon:hover .overlay {
  display: block;
}

.canon img {
  height: 100%;
  width: 100%;
}

.canon_text {
  background-color:rgba(0, 0, 0, 0.701961);
  bottom:0px;
  max-height:48px;
  min-height:1px;
  overflow:hidden;
  position:absolute;
  text-align: left;
}

.canon:hover .canon_text {
  max-height: 200px;
  transition-duration: 1s;
  transition-property: max-height;
  transition-timing-function: ease;
}
.canon_text div {
    color: rgb(247, 247, 247);
    font-family: ;
    height: 42px;
    margin-bottom: 4px;
    margin-top: 5px;
    max-height: 200px;
    overflow: hidden;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    text-align: center;
}

.canon_text p {
color: rgb(205, 192, 178);
    font-size: 9px;
    line-height: 10px;
    margin-bottom: 20px;
    margin-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

.also_table {
  width: 180px;
  height: 100px;
  background-color: #000;
  border-radius: 2px;
  padding: 5px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  text-align: justify;
  font-family: 'Oswald', cursive;
  overflow: hidden;
  align: center
  margin-left: 7px;
  margin-top: 20px;
  margin-bottom:5px;
}

.also_img {
position: relative;
z-index: 2;
width: 180px;
height: 100px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}

.also_img > img {
  width: 180px;
  height: 100px;
  position: relative;
  z-index: 2;
}

.also_img_dsc {
   position: relative;
   z-index: 1;
   width: 180px;
   height: 100px;
   margin-top: -100px;
   text-align: center;
   padding: 5px;
   overflow: auto;
}

.also_img_dsc a {
   font-color: silver;
}

.also_table:hover .also_img {
    margin-left: 200px;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
}

/*sablonok*/
.postbg {
  background-color: #928a8d;
  width: 430px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
}

.posthd {
  height: 40px;
  font-size: 40px;
  font-family: 'Italianno';
  text-align: center;
  line-height: 100%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 430px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
}

.posttb {
  height: 310px;
  padding: 5px 5px 5px 5px;
  margin-left: 3px;
}

.posttb .postet1 {
  height: 50px;
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 92%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 200px;
  margin-bottom: 2px;
}

.posttb div {
  height: 40px;
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 92%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 200px;
  margin-bottom: 2px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 20px #000 inset;
}

.postpic {
  height: 320px;
  width: 200px;
  margin-top: 10px;
  margin-right: 8px;
}

.postline {
  height: 40px;
  padding-top: 10px;
  font-size: 40px;
  font-family: 'Italianno';
  text-align: center;
  line-height: 92%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 430px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
}

.postetbody {
  height: auto;
  padding: 10px;
  line-height: 120%;
  width: 410px;
  text-align: justify
}

.keresotabla {
  vertical-align: top;
  padding: 10px;
  padding-right: 5px;
  height: 320px;
}

.keresoadat {
  height: 320px;
  overflow: auto;
  padding-right: 5px;
}

.keresomese {
  border-top: 1px dotted #2a2a2a;
  text-align: justify;
  padding-top: 10px;
  margin-top: 5px;
}

.accbody {
  height: auto;
  padding: 10px;
  margin-left: 5px;
}

.acctxt {
  height: auto;
  text-align: justify;
  line-height: 120%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  width: 370px;
  margin-bottom: 2px;
}

/*multilista*/

.alap2 {
  width: 224px;
  height: 224px;
  border: 5px solid #5A4E3E;
}

.kep {
  opacity: 0.0;
  height: 224px;
  width: 224px;
  -webkit-transition: opacity .5s linear;
  -moz-transition: opacity .5s linear;
  -o-transition: opacity .5s linear;
  background: #f7f4ff;
}

.kep:hover {
  opacity: .9
}

.szoveg {
  font-family: Oxygen;
  font-size: 13px;
  text-align: justify;
  color: #332a29;
  line-height: 100%;
  width: 224px;
  height: 210px;
  overflow: auto;
  margin-top: -10px;
}

.also_table_fo {
  width: 175px;
  height: 100px;
  background-color: #928A8D;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0px 0px 2px #000, 0px 0px 20px #000 inset;
  overflow: hidden;
}

.also_img_fo {
  position: relative;
  z-index: 2;
  width: 175px;
  height: 100px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}

.also_img_fo > img {
  width: 175px;
  height: 100px;
  position: relative;
  z-index: 2;
}

.also_img_dsc_fo {
  position: relative;
  z-index: 1;
  width: 163px;
  height: 88px;
  font-family: 'Oswald', cursive;
  margin-top: -100px;
  font-size: 12px;
  padding: 6px;
  text-align: justify;
  overflow: auto;
}

.also_img_dsc_fo a {
  font-color: black;
}

.also_table_fo:hover .also_img_fo {
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}

.left:hover .also_img_fo {
  margin-left: -200px;
}

.right:hover .also_img_fo {
  margin-left: 200px;
}


also_table_sajat {
  width: 440px;
  height: 45px;
  background-color: #928A8D;
  border-radius: 5px;
  padding: 6px;
  margin-left: 7px;
  margin-top: 20px;
  margin-bottom: 5px;
}

.also_img_sajat {
  position: relative;
  z-index: 2;
  width: 440px;
  height: 45px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}

.also_img_sajat > img {
  width: 440px;
  height: 45px;
  position: relative;
  z-index: 2;
}

.also_img_dsc_sajat {
  position: relative;
  z-index: 1;
  width: 430px;
  height: 35px;
  padding: 6px;
  text-align: justify;
  margin-top: -47px;
  overflow: hidden;
  font-size: 11px;
}

.also_table_sajat:hover .also_img_sajat {
  margin-left: 452px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1.7s;
  -moz-transition: 1.7s;
  -o-transition: 1.7s;
  -htm-transition: 1.7s;
  -webkit-transition: 1.7s;
}

.forumpic_news {
  opacity: 0;
  width: 520px;
  height: 100px;
  transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -webkit-transition-duration: 1.5s;
}

.forumpic_news:hover {
  opacity: 0.98;
}

.forumpic_text_news {
  width: 520px;
  height:100px;
  background-image:url(http://kephost.com/images/2016/03/01/a0532d.jpg);
  text-align: justify;
  font-size:14px;
  line-height: 170%;
  color: white;
  overflow:auto;
}

also_table_elfogadott30 {
  width: 460px;
  height: 30px;
  background-color: #928A8D;
  border-radius: 5px;
  padding: 6px;
  margin-left: 7px;
  margin-top: 20px;
  margin-bottom: 5px;
}

.also_img_elfogadott30{
  position: relative;
  z-index: 2;
  width: 460px;
  height: 30px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}

.also_img_elfogadott30 > img {
  width: 460px;
  height: 30px;
  position: relative;
  z-index: 2;
}

.also_img_dsc_elfogadott30 {
  position: relative;
  z-index: 1;
  width: 454px;
  height: 24px;
  padding: 1px;
  text-align: justify;
  margin-top: -30px;
  overflow: auto;
  overflow-y: auto;
  font-size: 12px;
}

.also_table_elfogadott30:hover .also_img_elfogadott30 {
  margin-left: 470px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1.7s;
  -moz-transition: 1.7s;
  -o-transition: 1.7s;
  -htm-transition: 1.7s;
  -webkit-transition: 1.7s;
}

/*csoportok*/

.grpmain {
  width: 500px;
  height: 270px;
  border: 3px solid #555;
  box-shadow: 6px 6px 6px #8A7171, 6px 6px 6px black;
}

.grppic {
  opacity: 0.0;
  height: 270px;
  width: 500px;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  background: #928A8D;
}

.grppic:hover {
  opacity: 0.9
}

.grptext {
  font-family: Verdana;
  font-size: 11px;
  font-weight: bold;
  text-align: justify;
  color: #DBCDC8;
  line-height: 110%;
  width: 480px;
  height: 250px;
  overflow: auto;
  margin-top: 10px;
  margin-left: 15px;
}

.grpmainproba {
  width: 500px;
  height: 270px;
  border: 3px solid #555;
  border-radius: 10px;
  box-shadow: 6px 6px 6px black, 6px 6px 6px black;
}

.grppicproba {
  opacity: 0.0;
  height: 270px;
  width: 500px;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  background: #928A8D;
}

.grppicproba:hover {
  opacity: 0.8
}

.grptextproba {
  font-family: Verdana;
  font-size: 11px;
  font-weight: bold;
  text-align: justify;
  color: white;
  line-height: 1.8;
  padding-left:3px;
  padding-right:3px;
  width: 460px;
  height: 204px;
  overflow: auto;
  margin-top: 34px;
  margin-left: 25px;
}

/*hirdetés*/

.lvmain {
  width: 573px;
  height: 573px;
  border: 3px solid #555;
  border-radius: 6px;
  box-shadow: 6px 6px 6px black, 6px 6px 6px black;
}

 
  .lvpic {
    opacity: 0.0;
    height: 573px;
    width: 573px;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    background: #f7f4ff;
  }
 
  .lvpic {
    opacity: 0.0;
    height: 573px;
    width: 573px;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    background-image: url("http://kephost.com/images/2016/05/12/hirdetes-hatter2a.jpg");
  }
 
  .lvpic:hover {
    opacity: 0.9
  }
 
  .lvtext {
    font-family: Verdana;
    font-size: 11px;
    text-align: justify;
    color: #fff;
    line-height: 110%;
    width: 540px;
    height: 270px;
    overflow: auto;
    margin-top: 15px;
    margin-left: 15px;
    padding-left: 3px;
    padding-right: 3px;
  }
 
  .lvgif {
    width: 260px;
    height: 167px;
    margin-top: 10px;
    margin-left: 16px;
    display: inline-block;
  }
 
  .lvlink {
    width: 260px;
    height: 167px;
    margin-top: 25px;
    margin-left: 95px;
    display: inline-block;
    position: absolute;
    line-height: 180%;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
  }


Octi October
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : Still in the galaxy...

http://lasvegas.hungarianforum.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Luffy on September 10th 2016, 12:13 pm

Here:

Replace your CSS with this one:
Code:
.chatbox_row_1 {
background : #8D8487;
}
 
.chatbox_row_2 {
background : #989093;
}
 
#i_logo {
    width: 85%;
    min-width: 1000px;
    margin-right: 6px;
}
 
 
.beleponev {
  font-family: 'Open Sans', cursive;
  font-weight: 400;
  font-rotate: -50;
  text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgb(84, 78, 68) 0px 0px 3px;
  font-size: 18px;
}
 
/*PAGRINDINÄ– LENTA*/
.bodylinewidth{
margin-top: auto
margin-bottom: 3px;
width: 1050px;
}
 
body {
  background-color: #8A7171;
}
 
td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides {
  background-color: rgba(0, 0, 0, 0);
  background-image: url(http://illiweb.com/fa/empty.gif);
  border-width: 0px;
  border-style: solid;
  height: 28px;
}
 
.bodyline{
  background-color: #8A7171;
  border-radius: 35px;
  box-shadow: 1px 1px 30px 0px #000000 inset;
}
 
/*alap-forum*/
 
.forumline{
  background-color: #928A8D;
  border-radius: 30px;
  box-shadow: 1px 1px 30px 0px #000000 inset ;
  padding: 7px;
  margin-top: 10px;
  margin-bottom: 10px;
}
 
a.forumlink {
  text-decoration: none;
  border-width: 0px 0px 1px 0px;
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-size: 24px;
  font-weight: lighter;
  display:block;
  text-align: center;
  margin-bottom: 0px;
  text-shadow: 0 1px 1px #000, 0 0 3px black;
}
 
a.forumlink:hover{
-moz-border-radius: 7px 7px 7px 7px;
font-family: 'Lobster', cursive;
font-variant: capitalize;
font-size: 24px;
font-weight: lighter;
text-decoration:none;
display:block;
text-align: center;
text-shadow: 0 1px 1px #000, 0 0 3px black;
}
 
a:link, a:visited {
  text-decoration: none;
}
 
a:hover{
  -o-transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  text-shadow: 1px 0px 4px #664343;
  font-style: italic;
  text-decoration: none!important;
}
 
 
/*dőlt*/
i {color:#0A474A; font: normal 12px Georgia; font-style: italic;}
 
/*scrollbar*/
::-webkit-scrollbar {
margin-right: 2px;
background-color: #928A8D;
width: 10px;
}
 
.mini::-webkit-scrollbar {
width: 5px;
}
 
::-webkit-scrollbar:horizontal {
  margin-right: 2px;
background-color: #928A8D;
height: 7px;
}
 
::-webkit-scrollbar-thumb {
background: #3E3E3E;
  -webit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
 
::-webkit-scrollbar-track {
-webit-box-shadow: 0 0 2px #000;
}
 
/*nyilacskák*/
.updownbutton {
  position:fixed;
  bottom:20px;
  right:30px; /* replace right with left to display the buttons on the left */
  z-index:100;
}
 
.updownbutton img {
  filter:alpha(opacity=70);
  -khtml-opacity:0.7;
  -moz-opacity:0.7;
  opacity:0.7;
}
 
.updownbutton img:hover {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
}
 
/*lastpost*/
.lastpost {
  width: 300px;
  height: 105px;
  padding: 5px;
  font-size: 12px;
  border-radius: 5px;
  border: 2px solid #171b1a;
  box-shadow: 0 0 2px #0d0d09, 0 0 50px #000000 inset;
  text-align: center;
  margin: 5px;
  text-shadow: 0 1px 1px #000;
  position: relative;
  margin-top: 10px;
}
 
 
.lastpostbel {
  max-width: 220px;
  border: 2px solid #171b1a;
  border-radius: 5px;
  margin-left: 30%;
  padding: 3px;
  box-shadow: 0 0 2px #0d0d09, 0 0 10px #000000 inset;
}
 
.lastcím {
  font-size: 13px;
  text-transform: lowercase;
  text-shadow: 1px 1px 0 #000, 0 0 4px #582E28!important;
  font-style: italic;
  width: 200px;
}
 
.lastpost-avatar{
  padding: 3px;
}
 
.lastpost-avatar img {
  border-radius: 5px;
  background-color: #928A8D;
  box-shadow: 0 0 3px #776546;
  border: 2px solid #171b1a;
  background: ;
  padding: 3px;
  position: absolute;
  width: 58px;
  height: auto;
  margin-top: -3px;
  margin-left: 0px;
}
 
 
/*lenyílós profil*/
.profil {
  width: 230px;
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  background-color: ;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow:  0 0 10px #000 inset;
  border-radius: 250px 15px 15px 250px;
}
 
.profil img {
  max-width: 200px;
  border: 1px dotted white;
-webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
}

 .profil img:hover {
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
}
 
.passion {
  display: block;
  text-align:center;
  color: #0A474A;
  font-size: 9px;
  letter-spacing: 2px;
}
 
.eltunik {
  height: 28px;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  overflow: hidden;
  text-align: center;
  padding-bottom: 5px;
}
 
.lenyilik {
  height: 0px;
}
 
.eltunik:hover {
  height: 300px;
  background-color: none;
  line-height: 100%;
  margin-right: 10px;
  margin-left: 10px;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
}
 
.eltunik:hover .lenyilik {
  height: 300px;
  overflow: auto;
}
 
.eltunik .lenyilik img {
  border-top-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
}
 
.karinev{
  font-family:'Open Sans', cursive;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgb(84, 78, 68) 0px 0px 3px;
}
 
.karinev a:hover{
  text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgba(3, 43, 30, 1) 0px 0px 3px;
}
 
.postdetails.poster-profile a img {
border: 8px solid #705655;
-moz-border-radius:8px;
background-color:#705655;
}
 
/*ki van itt?*/
.statki {
  background-color: #928A8D;
  margin-top: -20px;
  margin-left: 14px;
  width: 320px;
  height: 120px;
  padding: 8px;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  box-shadow: rgba(33, 24, 17,0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  overflow: auto;
}
 
.statstat {
  background-color: #928A8D;
  margin-top: -47px;
  margin-left: 14px;
  width: 285px;
  height: 300px;
  padding: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  border-radius: 5px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  text-align: center;
  box-shadow: rgba(33, 24, 17,0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  overflow: auto;
}
 
.új_user strong {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  letter-spacing: -2px;
  line-height: 50%;
  text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
  text-transform: capitalize;
}
 
.mennyie strong {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
  letter-spacing: -2px;
line-height: 50%;
  text-align: center;
text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
}
 
.mennyi {
font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  text-align: center;
  }
 
.creditek {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  text-transform:;
  text-shadow: 0 1px 1px #000;
  text-align: justify;
  text-transform: none;
  overflow: auto;
  padding: 10px;
  }
 
.csopi {
  width: 130px;
  height: 13px;
  padding: 3px;
  margin-right: -10px;
  border-radius: 5px;
  letter-spacing: .3px;
  font-size: 12px;
  text-align: left;
  background-color: #928A8D;
box-shadow: 0 0 1px #000, inset 0 0 10px #000;
font-family: 'Open Sans', sans-serif;
  border-bottom: 1px solid #444444;
  }
 
.ki_ki {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
}
 
/*menüsor*/
.userbar {
  position: fixed;
  top: -5px;
  left: 20px;
  right: 5px;
  background-color: #928A8D;
  border: 1px solid #232323;
  box-shadow: -2px -2px 1px 1px #232323 inset;
  padding: 6px; width: 95%;
  border-radius: 35px/108px;
  z-index: 3;
}
 
a.mainmenu {
  -moz-text-shadow: #000 0 1px 1px;
  -o-transition: all 1s cubic-bezier(0.27,0.1,0.27,1) 0;
  display: inline-block;
  font-family: 'Lobster', cursive;
  font-size: 15px;
  text-shadow: 0 1px 1px #fff, 0 0 3px black;
  text-transform: lowercase;
}
 
a.mainmenu:hover {
  font-family: 'Lobster', cursive;
  font-size: 15px;
  text-transform: lowercase;
  color: #fff;
  text-shadow: 0 1px 1px #000, 0 0 3px #ffffff;
}
 
a.cattitle {
  font-family: 'Times new roman', sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 2px 2px #000;
  text-decoration: none;
  display:block;
}
 
 
/*szövegtörzs*/
.postbody{
  text-align: justify;
  padding: 20px;
}
 
.postbody a {
  color: #380023!important;
}
 
.msg {
color: #a6a3a3;
  font-size: 13px;
}
 
/*widget*/
.module-title {
  color: white;
  border-width: 0px 0px 1px 0px;
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-weight: 400;
  font-rotate: -50;
  text-transform: lowercase;
  text-shadow: 0 1px 1px #000, 0 0 3px black;
  font-size: 24px;
}
 
.forumrész_doboz {
 width: 350px;
 padding: 10px;
 border-radius: 10px;
 background-color: #928A8D;
 box-shadow: 0px 0px 2px #000, 0px 0px 20px #000 inset;
}
 
 
/*kúp*/
.felso {
  background-color: #928A8D;
  border-radius: 500px 500px 0px 0px / 100px;
  border: 3px solid #000000;
  box-shadow: 0 0 5px black, 0 0 10px black inset;
  margin-bottom: -30px;
  margin-top: 10px;
  margin-left: 9px;
  width: 500px;
  height: 80px;
}
 
h2 {
color: #580606!important;
font-size: 40px;
margin-bottom: -4px;
margin-top: 40px;
text-align: center;
text-shadow:1px 1px #EEEEEE, 2px 2px 6px #EEEEEE,-1px -1px #EEEEEE,-2px -2px 6px #EEEEEE,-1px 1px #EEEEEE,-2px 2px 6px #EEEEEE,1px -1px #EEEEEE,2px -2px 6px #EEEEEE;
letter-spacing: -1px;
}
 
.secondarytitle h2 {
  font-family: Shelby;
  font-weight: 400;
}
 
.forumrész_doboz {
width: 350px;
padding: 10px;
border-radius: 10px;
background-color:#2b1820;
box-shadow: 0px 0px 2px #000, 0px 0px 20px #000 inset;
 }
 
/*felsőtábla*/
.felso_cim {
  text-shadow: 1px 1px white, 0 6px 8px #000;
  font-family: 'Bangers', cursive;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  line-height: 60%;
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  position: ;
  bottom: 0;
  width: 20px;
  height: 70px;
}
 
.quickie_cim {
  text-shadow: 1px 1px #939393, 2px 2px #939393, 0 6px 8px #3E3E3E;
  font-family: 'Bangers', cursive;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  line-height: 60%;
  writing-mode: tb-rl;
  letter-spacing: -1px;
  white-space: nowrap;
  display: inline-block;
  position: ;
  bottom: 0;
  margin-left: 176px;
  width: 20px;
  height: 70px;
}
 
.news_cim {
  text-shadow: 1px 1px white, 0 6px 8px white;
  font-family: 'Bangers', cursive;
  font-size: 29px;
  font-weight: 400;
  text-align: center;
  border-bottom: 1px dotted #444444;
  line-height: 60%;
}
 
.canon_cim {
  text-shadow: 1px 1px white, 0 6px 3px #000;
  font-family: 'Bangers', cursive;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  border-bottom: 1px dotted #444444;
  line-height: 60%;
  padding-top: 8px;
}
 
.felso_tableble {
  width: 210px;
  height: 140px;
  background-color: #928A8D;
  padding: 5px;
  border-top: 10px solid #3E3E3E;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent/* CSS by srmark */;
  border-bottom: 10px solid #3E3E3E;
  -moz-border-top-colors: #3E3E3E;
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: #3E3E3E;
  -moz-border-radius: 50px/* CSS by srmark */;
  overflow: auto;
  text-align: justify;
  font-family: 'Oswald', cursive;
  margin-left:-35px;
  margin-top: 15px;
}
 
.quickie_tableble{
  width: 210px;
  height: 75px;
  background-color: #928A8D;
  padding: 5px;
  overflow: auto;
  text-align: justify;
  font-family: 'Oswald', cursive;
  margin-left:-30px;
  margin-top:15px;
}
 
.felsotable1 {
  width: 250px;
  height: 426px;
  background-color: #928A8D;
  padding: 5px;
  border-top: 10px solid #3E3E3E;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent/* CSS by srmark */;
  border-bottom: 10px solid #3E3E3E;
  -moz-border-top-colors: #3E3E3E;
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: #3E3E3E;
  -moz-border-radius: 50px/* CSS by srmark */;
  text-shadow: 0 1px 1px #000;
  font-size: 11px;
  text-align: justify;
  margin-top: 5px;
  margin-left: 6px;
}
 
.felsotable2 {
  width: 340px;
  height: 260px;
  background-color: #C2BB94;
  padding: 5px;
  border-top: 10px solid #3E3E3E;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent/* CSS by srmark */;
  border-bottom: 10px solid #3E3E3E;
  -moz-border-top-colors: #3E3E3E;
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: #3E3E3E;
  -moz-border-radius: 50px/* CSS by srmark */;
  font-size: 11px;
  text-align: justify;
  margin-top: 5px;
  margin-left: 6px;
  z-index: 1;
}
 
.felsotable2vid {
  width: 330px;
  background-color: black;
  line-height: 115%;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  text-shadow: 0 1px 1px #000;
  font-size: 11px;
  text-align: justify;
  margin-top: 5px;
  margin-left: 6px;
  padding-left: 20px;
}
 
.felso_cim2 {
  font-family: 'Playfair Display', serif;
  text-shadow: 0 1px 1px #000;
  letter-spacing: -1px;
  color: #b4a08d;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}
 
.infostaff {
  display: inline-block;
  margin-left: 14px;
  box-shadow: 0 0 1em #212020;
  margin-top: 20px;
  vertical-align: top;
}
 
.iblock {
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  margin-top: -65px;
  font-size: 9px;
  line-height:190%;
  font-weight:bold;
  text-transform: uppercase;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
 
.infostaff > div {
  -moz-transform: scale(0.2) rotate(-60deg);
  -moz-transition: all .3s linear;
  -o-transform: scale(0.2) rotate(-60deg);
  -o-transition: all .3s linear;
  -webkit-transform: scale(0.2) rotate(-60deg);
  -webkit-transition: all .3s linear;
  margin-left: 10px;
  opacity: 0;
  position: absolute;
  transform: scale(0.3) rotate(-60deg);
  transition: all .3s linear;
}
 
.kozlemeny2 {
  background-color: #928A8D;
  border-radius: 5px;
  box-shadow: 0 0 25px 2px #000 inset;
  width: 120px;
  height: 50px;
  z-index: 2;
}
 
.infostaff:hover > div {
  -moz-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  -webkit-transform: scale(1) rotate(0deg);
  opacity: 1;
  transform: scale(1) rotate(0deg);
  visibility: visible
}
 
.nevek {
  font-family: 'Playfair Display', serif;
  color: #b4a08d;
  font-size: 20px;
  text-align: center;
  letter-spacing: -1px;
  text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
  border-bottom: 2px dotted #232323;
}
 
.privi {
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -1px;
  text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
}
 
a.forumlink {
  text-decoration: none;
  border-width: 0px 0px 1px 0px;
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-size: 24px;
  font-weight: lighter;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-bottom: 0px;
  text-shadow: 0 1px 1px #000, 0 0 3px black;
}
 
a.forumlink:hover {
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-variant: capitalize;
  font-size: 24px;
  font-weight: lighter;
  text-decoration: none;
  display: block;
  text-align: center;
  text-shadow: 0 1px 1px #000, 0 0 3px #ffffff;
}
 
.botommargin {
  margin-bottom: 5px;
}
 
.canonlist {
    overflow-x: auto;
    height: 200px;
    margin-top: 15px;
}
 
.canon {
  float: left;
  height: 190px;
  min-height: 130px;
  position: relative;
  width: 100px;
  margin-left: 5px;
}
 
.canon .overlay {
  background: rgba(0, 0, 0, 0.4);
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}
 
.canon:hover .overlay {
  display: block;
}
 
.canon img {
  height: 100%;
  width: 100%;
}
 
.canon_text {
  background-color:rgba(0, 0, 0, 0.701961);
  bottom:0px;
  max-height:48px;
  min-height:1px;
  overflow:hidden;
  position:absolute;
  text-align: left;
}
 
.canon:hover .canon_text {
  max-height: 200px;
  transition-duration: 1s;
  transition-property: max-height;
  transition-timing-function: ease;
}
.canon_text div {
    color: rgb(247, 247, 247);
    font-family: ;
    height: 42px;
    margin-bottom: 4px;
    margin-top: 5px;
    max-height: 200px;
    overflow: hidden;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    text-align: center;
}
 
.canon_text p {
color: rgb(205, 192, 178);
    font-size: 9px;
    line-height: 10px;
    margin-bottom: 20px;
    margin-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
}
 
.also_table {
  width: 180px;
  height: 100px;
  background-color: #000;
  border-radius: 2px;
  padding: 5px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  text-align: justify;
  font-family: 'Oswald', cursive;
  overflow: hidden;
  align: center
  margin-left: 7px;
  margin-top: 20px;
  margin-bottom:5px;
}
 
.also_img {
position: relative;
z-index: 2;
width: 180px;
height: 100px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
 
.also_img > img {
  width: 180px;
  height: 100px;
  position: relative;
  z-index: 2;
}
 
.also_img_dsc {
  position: relative;
  z-index: 1;
  width: 180px;
  height: 100px;
  margin-top: -100px;
  text-align: center;
  padding: 5px;
  overflow: auto;
}
 
.also_img_dsc a {
  font-color: silver;
}
 
.also_table:hover .also_img {
    margin-left: 200px;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
}
 
/*sablonok*/
.postbg {
  background-color: #928a8d;
  width: 430px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
}
 
.posthd {
  height: 40px;
  font-size: 40px;
  font-family: 'Italianno';
  text-align: center;
  line-height: 100%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 430px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
}
 
.posttb {
  height: 310px;
  padding: 5px 5px 5px 5px;
  margin-left: 3px;
}
 
.posttb .postet1 {
  height: 50px;
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 92%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 200px;
  margin-bottom: 2px;
}
 
.posttb div {
  height: 40px;
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 92%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 200px;
  margin-bottom: 2px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 20px #000 inset;
}
 
.postpic {
  height: 320px;
  width: 200px;
  margin-top: 10px;
  margin-right: 8px;
}
 
.postline {
  height: 40px;
  padding-top: 10px;
  font-size: 40px;
  font-family: 'Italianno';
  text-align: center;
  line-height: 92%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 430px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
}
 
.postetbody {
  height: auto;
  padding: 10px;
  line-height: 120%;
  width: 410px;
  text-align: justify
}
 
.keresotabla {
  vertical-align: top;
  padding: 10px;
  padding-right: 5px;
  height: 320px;
}
 
.keresoadat {
  height: 320px;
  overflow: auto;
  padding-right: 5px;
}
 
.keresomese {
  border-top: 1px dotted #2a2a2a;
  text-align: justify;
  padding-top: 10px;
  margin-top: 5px;
}
 
.accbody {
  height: auto;
  padding: 10px;
  margin-left: 5px;
}
 
.acctxt {
  height: auto;
  text-align: justify;
  line-height: 120%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  width: 370px;
  margin-bottom: 2px;
}
 
/*multilista*/
 
.alap2 {
  width: 224px;
  height: 224px;
  border: 5px solid #5A4E3E;
}
 
.kep {
  opacity: 0.0;
  height: 224px;
  width: 224px;
  -webkit-transition: opacity .5s linear;
  -moz-transition: opacity .5s linear;
  -o-transition: opacity .5s linear;
  background: #f7f4ff;
}
 
.kep:hover {
  opacity: .9
}
 
.szoveg {
  font-family: Oxygen;
  font-size: 13px;
  text-align: justify;
  color: #332a29;
  line-height: 100%;
  width: 224px;
  height: 210px;
  overflow: auto;
  margin-top: -10px;
}
 
.also_table_fo {
  width: 175px;
  height: 100px;
  background-color: #928A8D;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0px 0px 2px #000, 0px 0px 20px #000 inset;
  overflow: hidden;
}
 
.also_img_fo {
  position: relative;
  z-index: 2;
  width: 175px;
  height: 100px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}
 
.also_img_fo > img {
  width: 175px;
  height: 100px;
  position: relative;
  z-index: 2;
}
 
.also_img_dsc_fo {
  position: relative;
  z-index: 1;
  width: 163px;
  height: 88px;
  font-family: 'Oswald', cursive;
  margin-top: -100px;
  font-size: 12px;
  padding: 6px;
  text-align: justify;
  overflow: auto;
}
 
.also_img_dsc_fo a {
  font-color: black;
}
 
.also_table_fo:hover .also_img_fo {
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}
 
.left:hover .also_img_fo {
  margin-left: -200px;
}
 
.right:hover .also_img_fo {
  margin-left: 200px;
}
 
 
also_table_sajat {
  width: 440px;
  height: 45px;
  background-color: #928A8D;
  border-radius: 5px;
  padding: 6px;
  margin-left: 7px;
  margin-top: 20px;
  margin-bottom: 5px;
}
 
.also_img_sajat {
  position: relative;
  z-index: 2;
  width: 440px;
  height: 45px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}
 
.also_img_sajat > img {
  width: 440px;
  height: 45px;
  position: relative;
  z-index: 2;
}
 
.also_img_dsc_sajat {
  position: relative;
  z-index: 1;
  width: 430px;
  height: 35px;
  padding: 6px;
  text-align: justify;
  margin-top: -47px;
  overflow: hidden;
  font-size: 11px;
}
 
.also_table_sajat:hover .also_img_sajat {
  margin-left: 452px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1.7s;
  -moz-transition: 1.7s;
  -o-transition: 1.7s;
  -htm-transition: 1.7s;
  -webkit-transition: 1.7s;
}
 
.forumpic_news {
  opacity: 0;
  width: 520px;
  height: 100px;
  transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -webkit-transition-duration: 1.5s;
}
 
.forumpic_news:hover {
  opacity: 0.98;
}
 
.forumpic_text_news {
  width: 520px;
  height:100px;
  background-image:url(http://kephost.com/images/2016/03/01/a0532d.jpg);
  text-align: justify;
  font-size:14px;
  line-height: 170%;
  color: white;
  overflow:auto;
}
 
also_table_elfogadott30 {
  width: 460px;
  height: 30px;
  background-color: #928A8D;
  border-radius: 5px;
  padding: 6px;
  margin-left: 7px;
  margin-top: 20px;
  margin-bottom: 5px;
}
 
.also_img_elfogadott30{
  position: relative;
  z-index: 2;
  width: 460px;
  height: 30px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}
 
.also_img_elfogadott30 > img {
  width: 460px;
  height: 30px;
  position: relative;
  z-index: 2;
}
 
.also_img_dsc_elfogadott30 {
  position: relative;
  z-index: 1;
  width: 454px;
  height: 24px;
  padding: 1px;
  text-align: justify;
  margin-top: -30px;
  overflow: auto;
  overflow-y: auto;
  font-size: 12px;
}
 
.also_table_elfogadott30:hover .also_img_elfogadott30 {
  margin-left: 470px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1.7s;
  -moz-transition: 1.7s;
  -o-transition: 1.7s;
  -htm-transition: 1.7s;
  -webkit-transition: 1.7s;
}
 
/*csoportok*/
 
.grpmain {
  width: 500px;
  height: 270px;
  border: 3px solid #555;
  box-shadow: 6px 6px 6px #8A7171, 6px 6px 6px black;
}
 
.grppic {
  opacity: 0.0;
  height: 270px;
  width: 500px;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  background: #928A8D;
}
 
.grppic:hover {
  opacity: 0.9
}
 
.grptext {
  font-family: Verdana;
  font-size: 11px;
  font-weight: bold;
  text-align: justify;
  color: #DBCDC8;
  line-height: 110%;
  width: 480px;
  height: 250px;
  overflow: auto;
  margin-top: 10px;
  margin-left: 15px;
}
 
.grpmainproba {
  width: 500px;
  height: 270px;
  border: 3px solid #555;
  border-radius: 10px;
  box-shadow: 6px 6px 6px black, 6px 6px 6px black;
}
 
.grppicproba {
  opacity: 0.0;
  height: 270px;
  width: 500px;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  background: #928A8D;
}
 
.grppicproba:hover {
  opacity: 0.8
}
 
.grptextproba {
  font-family: Verdana;
  font-size: 11px;
  font-weight: bold;
  text-align: justify;
  color: white;
  line-height: 1.8;
  padding-left:3px;
  padding-right:3px;
  width: 460px;
  height: 204px;
  overflow: auto;
  margin-top: 34px;
  margin-left: 25px;
}
 
/*hirdetés*/
 
.lvmain {
  width: 573px;
  height: 573px;
  border: 3px solid #555;
  border-radius: 6px;
  box-shadow: 6px 6px 6px black, 6px 6px 6px black;
}
 
 
  .lvpic {
    opacity: 0.0;
    height: 573px;
    width: 573px;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    background: #f7f4ff;
  }
 
  .lvpic {
    opacity: 0.0;
    height: 573px;
    width: 573px;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    background-image: url("http://kephost.com/images/2016/05/12/hirdetes-hatter2a.jpg");
  }
 
  .lvpic:hover {
    opacity: 0.9
  }
 
  .lvtext {
    font-family: Verdana;
    font-size: 11px;
    text-align: justify;
    color: #fff;
    line-height: 110%;
    width: 540px;
    height: 270px;
    overflow: auto;
    margin-top: 15px;
    margin-left: 15px;
    padding-left: 3px;
    padding-right: 3px;
  }
 
  .lvgif {
    width: 260px;
    height: 167px;
    margin-top: 10px;
    margin-left: 16px;
    display: inline-block;
  }
 
  .lvlink {
    width: 260px;
    height: 167px;
    margin-top: 25px;
    margin-left: 95px;
    display: inline-block;
    position: absolute;
    line-height: 180%;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
  }






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Octi October on September 10th 2016, 12:22 pm

I really appreciate your help and patience but it still doesn't work TT

Octi October
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : Still in the galaxy...

http://lasvegas.hungarianforum.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Luffy on September 10th 2016, 12:29 pm

Okay try this as your CSS then:
Code:
.chatbox_row_1 {
background : #8D8487;
}
 
.chatbox_row_2 {
background : #989093;
}
 
#i_logo {
    width: 85%;
    min-width: 1000px;
    margin-right: 6px;
}
 
 
.beleponev {
  font-family: 'Open Sans', cursive;
  font-weight: 400;
  font-rotate: -50;
  text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgb(84, 78, 68) 0px 0px 3px;
  font-size: 18px;
}
 
/*PAGRINDINÄ– LENTA*/
.bodylinewidth{
margin-top: auto
margin-bottom: 3px;
width: 1050px;
}
 
body {
  background-color: #8A7171;
}
 
td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides {
  background-color: rgba(0, 0, 0, 0);
  background-image: url(http://illiweb.com/fa/empty.gif);
  border-width: 0px;
  border-style: solid;
  height: 28px;
}
 
.bodyline{
  background-color: #8A7171;
  border-radius: 35px;
  box-shadow: 1px 1px 30px 0px #000000 inset;
}
 
/*alap-forum*/
 
.forumline{
  background-color: #928A8D;
  border-radius: 30px;
  box-shadow: 1px 1px 30px 0px #000000 inset ;
  padding: 7px;
  margin-top: 10px;
  margin-bottom: 10px;
}
 
a.forumlink {
  text-decoration: none;
  border-width: 0px 0px 1px 0px;
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-size: 24px;
  font-weight: lighter;
  display:block;
  text-align: center;
  margin-bottom: 0px;
  text-shadow: 0 1px 1px #000, 0 0 3px black;
}
 
a.forumlink:hover{
-moz-border-radius: 7px 7px 7px 7px;
font-family: 'Lobster', cursive;
font-variant: capitalize;
font-size: 24px;
font-weight: lighter;
text-decoration:none;
display:block;
text-align: center;
text-shadow: 0 1px 1px #000, 0 0 3px black;
}
 
a:link, a:visited {
  text-decoration: none;
}
 
a:hover{
  -o-transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  text-shadow: 1px 0px 4px #664343;
  font-style: italic;
  text-decoration: none!important;
}
 
 
/*dőlt*/
i {color:#0A474A; font: normal 12px Georgia; font-style: italic;}
 
/*scrollbar*/
::-webkit-scrollbar {
margin-right: 2px;
background-color: #928A8D;
width: 10px;
}
 
.mini::-webkit-scrollbar {
width: 5px;
}
 
::-webkit-scrollbar:horizontal {
  margin-right: 2px;
background-color: #928A8D;
height: 7px;
}
 
::-webkit-scrollbar-thumb {
background: #3E3E3E;
  -webit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
 
::-webkit-scrollbar-track {
-webit-box-shadow: 0 0 2px #000;
}
 
/*nyilacskák*/
.updownbutton {
  position:fixed;
  bottom:20px;
  right:30px; /* replace right with left to display the buttons on the left */
  z-index:100;
}
 
.updownbutton img {
  filter:alpha(opacity=70);
  -khtml-opacity:0.7;
  -moz-opacity:0.7;
  opacity:0.7;
}
 
.updownbutton img:hover {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
}
 
/*lastpost*/
.lastpost {
  width: 300px;
  height: 105px;
  padding: 5px;
  font-size: 12px;
  border-radius: 5px;
  border: 2px solid #171b1a;
  box-shadow: 0 0 2px #0d0d09, 0 0 50px #000000 inset;
  text-align: center;
  margin: 5px;
  text-shadow: 0 1px 1px #000;
  position: relative;
  margin-top: 10px;
}
 
 
.lastpostbel {
  max-width: 220px;
  border: 2px solid #171b1a;
  border-radius: 5px;
  margin-left: 30%;
  padding: 3px;
  box-shadow: 0 0 2px #0d0d09, 0 0 10px #000000 inset;
}
 
.lastcím {
  font-size: 13px;
  text-transform: lowercase;
  text-shadow: 1px 1px 0 #000, 0 0 4px #582E28!important;
  font-style: italic;
  width: 200px;
}
 
.lastpost-avatar{
  padding: 3px;
}
 
.lastpost-avatar img {
  border-radius: 5px;
  background-color: #928A8D;
  box-shadow: 0 0 3px #776546;
  border: 2px solid #171b1a;
  background: ;
  padding: 3px;
  position: absolute;
  width: 58px;
  height: auto;
  margin-top: -3px;
  margin-left: 0px;
}
 
 
/*lenyílós profil*/
.profil {
  width: 230px;
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  background-color: ;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow:  0 0 10px #000 inset;
  border-radius: 250px 15px 15px 250px;
}
 
.profil img {
  max-width: 200px;
  border: 1px dotted white;
-webkit-filter: grayscale(0%)!important;
    -webkit-transition: .5s ease-in-out!important;
    -moz-filter: grayscale(0%)!important;
    -moz-transition: .5s ease-in-out!important;
    -o-filter: grayscale(0%)!important;
    -o-transition: .5s ease-in-out!important;
}
 
 .profil img:hover {
-webkit-filter: grayscale(100%)!important;
    -webkit-transition: .5s ease-in-out!important;
    -moz-filter: grayscale(100%)!important;
    -moz-transition: .5s ease-in-out!important;
    -o-filter: grayscale(100%)!important;
    -o-transition: .5s ease-in-out!important;
}
 
.passion {
  display: block;
  text-align:center;
  color: #0A474A;
  font-size: 9px;
  letter-spacing: 2px;
}
 
.eltunik {
  height: 28px;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  overflow: hidden;
  text-align: center;
  padding-bottom: 5px;
}
 
.lenyilik {
  height: 0px;
}
 
.eltunik:hover {
  height: 300px;
  background-color: none;
  line-height: 100%;
  margin-right: 10px;
  margin-left: 10px;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
}
 
.eltunik:hover .lenyilik {
  height: 300px;
  overflow: auto;
}
 
.eltunik .lenyilik img {
  border-top-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
}
 
.karinev{
  font-family:'Open Sans', cursive;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgb(84, 78, 68) 0px 0px 3px;
}
 
.karinev a:hover{
  text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgba(3, 43, 30, 1) 0px 0px 3px;
}
 
.postdetails.poster-profile a img {
border: 8px solid #705655;
-moz-border-radius:8px;
background-color:#705655;
}
 
/*ki van itt?*/
.statki {
  background-color: #928A8D;
  margin-top: -20px;
  margin-left: 14px;
  width: 320px;
  height: 120px;
  padding: 8px;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  box-shadow: rgba(33, 24, 17,0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  overflow: auto;
}
 
.statstat {
  background-color: #928A8D;
  margin-top: -47px;
  margin-left: 14px;
  width: 285px;
  height: 300px;
  padding: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  border-radius: 5px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  text-align: center;
  box-shadow: rgba(33, 24, 17,0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  overflow: auto;
}
 
.új_user strong {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  letter-spacing: -2px;
  line-height: 50%;
  text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
  text-transform: capitalize;
}
 
.mennyie strong {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
  letter-spacing: -2px;
line-height: 50%;
  text-align: center;
text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
}
 
.mennyi {
font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  text-align: center;
  }
 
.creditek {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  text-transform:;
  text-shadow: 0 1px 1px #000;
  text-align: justify;
  text-transform: none;
  overflow: auto;
  padding: 10px;
  }
 
.csopi {
  width: 130px;
  height: 13px;
  padding: 3px;
  margin-right: -10px;
  border-radius: 5px;
  letter-spacing: .3px;
  font-size: 12px;
  text-align: left;
  background-color: #928A8D;
box-shadow: 0 0 1px #000, inset 0 0 10px #000;
font-family: 'Open Sans', sans-serif;
  border-bottom: 1px solid #444444;
  }
 
.ki_ki {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
}
 
/*menüsor*/
.userbar {
  position: fixed;
  top: -5px;
  left: 20px;
  right: 5px;
  background-color: #928A8D;
  border: 1px solid #232323;
  box-shadow: -2px -2px 1px 1px #232323 inset;
  padding: 6px; width: 95%;
  border-radius: 35px/108px;
  z-index: 3;
}
 
a.mainmenu {
  -moz-text-shadow: #000 0 1px 1px;
  -o-transition: all 1s cubic-bezier(0.27,0.1,0.27,1) 0;
  display: inline-block;
  font-family: 'Lobster', cursive;
  font-size: 15px;
  text-shadow: 0 1px 1px #fff, 0 0 3px black;
  text-transform: lowercase;
}
 
a.mainmenu:hover {
  font-family: 'Lobster', cursive;
  font-size: 15px;
  text-transform: lowercase;
  color: #fff;
  text-shadow: 0 1px 1px #000, 0 0 3px #ffffff;
}
 
a.cattitle {
  font-family: 'Times new roman', sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 2px 2px #000;
  text-decoration: none;
  display:block;
}
 
 
/*szövegtörzs*/
.postbody{
  text-align: justify;
  padding: 20px;
}
 
.postbody a {
  color: #380023!important;
}
 
.msg {
color: #a6a3a3;
  font-size: 13px;
}
 
/*widget*/
.module-title {
  color: white;
  border-width: 0px 0px 1px 0px;
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-weight: 400;
  font-rotate: -50;
  text-transform: lowercase;
  text-shadow: 0 1px 1px #000, 0 0 3px black;
  font-size: 24px;
}
 
.forumrész_doboz {
 width: 350px;
 padding: 10px;
 border-radius: 10px;
 background-color: #928A8D;
 box-shadow: 0px 0px 2px #000, 0px 0px 20px #000 inset;
}
 
 
/*kúp*/
.felso {
  background-color: #928A8D;
  border-radius: 500px 500px 0px 0px / 100px;
  border: 3px solid #000000;
  box-shadow: 0 0 5px black, 0 0 10px black inset;
  margin-bottom: -30px;
  margin-top: 10px;
  margin-left: 9px;
  width: 500px;
  height: 80px;
}
 
h2 {
color: #580606!important;
font-size: 40px;
margin-bottom: -4px;
margin-top: 40px;
text-align: center;
text-shadow:1px 1px #EEEEEE, 2px 2px 6px #EEEEEE,-1px -1px #EEEEEE,-2px -2px 6px #EEEEEE,-1px 1px #EEEEEE,-2px 2px 6px #EEEEEE,1px -1px #EEEEEE,2px -2px 6px #EEEEEE;
letter-spacing: -1px;
}
 
.secondarytitle h2 {
  font-family: Shelby;
  font-weight: 400;
}
 
.forumrész_doboz {
width: 350px;
padding: 10px;
border-radius: 10px;
background-color:#2b1820;
box-shadow: 0px 0px 2px #000, 0px 0px 20px #000 inset;
 }
 
/*felsőtábla*/
.felso_cim {
  text-shadow: 1px 1px white, 0 6px 8px #000;
  font-family: 'Bangers', cursive;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  line-height: 60%;
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  position: ;
  bottom: 0;
  width: 20px;
  height: 70px;
}
 
.quickie_cim {
  text-shadow: 1px 1px #939393, 2px 2px #939393, 0 6px 8px #3E3E3E;
  font-family: 'Bangers', cursive;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  line-height: 60%;
  writing-mode: tb-rl;
  letter-spacing: -1px;
  white-space: nowrap;
  display: inline-block;
  position: ;
  bottom: 0;
  margin-left: 176px;
  width: 20px;
  height: 70px;
}
 
.news_cim {
  text-shadow: 1px 1px white, 0 6px 8px white;
  font-family: 'Bangers', cursive;
  font-size: 29px;
  font-weight: 400;
  text-align: center;
  border-bottom: 1px dotted #444444;
  line-height: 60%;
}
 
.canon_cim {
  text-shadow: 1px 1px white, 0 6px 3px #000;
  font-family: 'Bangers', cursive;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  border-bottom: 1px dotted #444444;
  line-height: 60%;
  padding-top: 8px;
}
 
.felso_tableble {
  width: 210px;
  height: 140px;
  background-color: #928A8D;
  padding: 5px;
  border-top: 10px solid #3E3E3E;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent/* CSS by srmark */;
  border-bottom: 10px solid #3E3E3E;
  -moz-border-top-colors: #3E3E3E;
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: #3E3E3E;
  -moz-border-radius: 50px/* CSS by srmark */;
  overflow: auto;
  text-align: justify;
  font-family: 'Oswald', cursive;
  margin-left:-35px;
  margin-top: 15px;
}
 
.quickie_tableble{
  width: 210px;
  height: 75px;
  background-color: #928A8D;
  padding: 5px;
  overflow: auto;
  text-align: justify;
  font-family: 'Oswald', cursive;
  margin-left:-30px;
  margin-top:15px;
}
 
.felsotable1 {
  width: 250px;
  height: 426px;
  background-color: #928A8D;
  padding: 5px;
  border-top: 10px solid #3E3E3E;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent/* CSS by srmark */;
  border-bottom: 10px solid #3E3E3E;
  -moz-border-top-colors: #3E3E3E;
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: #3E3E3E;
  -moz-border-radius: 50px/* CSS by srmark */;
  text-shadow: 0 1px 1px #000;
  font-size: 11px;
  text-align: justify;
  margin-top: 5px;
  margin-left: 6px;
}
 
.felsotable2 {
  width: 340px;
  height: 260px;
  background-color: #C2BB94;
  padding: 5px;
  border-top: 10px solid #3E3E3E;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent/* CSS by srmark */;
  border-bottom: 10px solid #3E3E3E;
  -moz-border-top-colors: #3E3E3E;
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: #3E3E3E;
  -moz-border-radius: 50px/* CSS by srmark */;
  font-size: 11px;
  text-align: justify;
  margin-top: 5px;
  margin-left: 6px;
  z-index: 1;
}
 
.felsotable2vid {
  width: 330px;
  background-color: black;
  line-height: 115%;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  text-shadow: 0 1px 1px #000;
  font-size: 11px;
  text-align: justify;
  margin-top: 5px;
  margin-left: 6px;
  padding-left: 20px;
}
 
.felso_cim2 {
  font-family: 'Playfair Display', serif;
  text-shadow: 0 1px 1px #000;
  letter-spacing: -1px;
  color: #b4a08d;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}
 
.infostaff {
  display: inline-block;
  margin-left: 14px;
  box-shadow: 0 0 1em #212020;
  margin-top: 20px;
  vertical-align: top;
}
 
.iblock {
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  margin-top: -65px;
  font-size: 9px;
  line-height:190%;
  font-weight:bold;
  text-transform: uppercase;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
 
.infostaff > div {
  -moz-transform: scale(0.2) rotate(-60deg);
  -moz-transition: all .3s linear;
  -o-transform: scale(0.2) rotate(-60deg);
  -o-transition: all .3s linear;
  -webkit-transform: scale(0.2) rotate(-60deg);
  -webkit-transition: all .3s linear;
  margin-left: 10px;
  opacity: 0;
  position: absolute;
  transform: scale(0.3) rotate(-60deg);
  transition: all .3s linear;
}
 
.kozlemeny2 {
  background-color: #928A8D;
  border-radius: 5px;
  box-shadow: 0 0 25px 2px #000 inset;
  width: 120px;
  height: 50px;
  z-index: 2;
}
 
.infostaff:hover > div {
  -moz-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  -webkit-transform: scale(1) rotate(0deg);
  opacity: 1;
  transform: scale(1) rotate(0deg);
  visibility: visible
}
 
.nevek {
  font-family: 'Playfair Display', serif;
  color: #b4a08d;
  font-size: 20px;
  text-align: center;
  letter-spacing: -1px;
  text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
  border-bottom: 2px dotted #232323;
}
 
.privi {
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -1px;
  text-shadow: 1px 1px 2px #000, 0 0 3px #544E44;
  font-weight: lighter !important;
}
 
a.forumlink {
  text-decoration: none;
  border-width: 0px 0px 1px 0px;
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-size: 24px;
  font-weight: lighter;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-bottom: 0px;
  text-shadow: 0 1px 1px #000, 0 0 3px black;
}
 
a.forumlink:hover {
  -moz-border-radius: 7px 7px 7px 7px;
  font-family: 'Lobster', cursive;
  font-variant: capitalize;
  font-size: 24px;
  font-weight: lighter;
  text-decoration: none;
  display: block;
  text-align: center;
  text-shadow: 0 1px 1px #000, 0 0 3px #ffffff;
}
 
.botommargin {
  margin-bottom: 5px;
}
 
.canonlist {
    overflow-x: auto;
    height: 200px;
    margin-top: 15px;
}
 
.canon {
  float: left;
  height: 190px;
  min-height: 130px;
  position: relative;
  width: 100px;
  margin-left: 5px;
}
 
.canon .overlay {
  background: rgba(0, 0, 0, 0.4);
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}
 
.canon:hover .overlay {
  display: block;
}
 
.canon img {
  height: 100%;
  width: 100%;
}
 
.canon_text {
  background-color:rgba(0, 0, 0, 0.701961);
  bottom:0px;
  max-height:48px;
  min-height:1px;
  overflow:hidden;
  position:absolute;
  text-align: left;
}
 
.canon:hover .canon_text {
  max-height: 200px;
  transition-duration: 1s;
  transition-property: max-height;
  transition-timing-function: ease;
}
.canon_text div {
    color: rgb(247, 247, 247);
    font-family: ;
    height: 42px;
    margin-bottom: 4px;
    margin-top: 5px;
    max-height: 200px;
    overflow: hidden;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    text-align: center;
}
 
.canon_text p {
color: rgb(205, 192, 178);
    font-size: 9px;
    line-height: 10px;
    margin-bottom: 20px;
    margin-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
}
 
.also_table {
  width: 180px;
  height: 100px;
  background-color: #000;
  border-radius: 2px;
  padding: 5px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
  text-align: justify;
  font-family: 'Oswald', cursive;
  overflow: hidden;
  align: center
  margin-left: 7px;
  margin-top: 20px;
  margin-bottom:5px;
}
 
.also_img {
position: relative;
z-index: 2;
width: 180px;
height: 100px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
 
.also_img > img {
  width: 180px;
  height: 100px;
  position: relative;
  z-index: 2;
}
 
.also_img_dsc {
  position: relative;
  z-index: 1;
  width: 180px;
  height: 100px;
  margin-top: -100px;
  text-align: center;
  padding: 5px;
  overflow: auto;
}
 
.also_img_dsc a {
  font-color: silver;
}
 
.also_table:hover .also_img {
    margin-left: 200px;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
}
 
/*sablonok*/
.postbg {
  background-color: #928a8d;
  width: 430px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
}
 
.posthd {
  height: 40px;
  font-size: 40px;
  font-family: 'Italianno';
  text-align: center;
  line-height: 100%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 430px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
}
 
.posttb {
  height: 310px;
  padding: 5px 5px 5px 5px;
  margin-left: 3px;
}
 
.posttb .postet1 {
  height: 50px;
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 92%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 200px;
  margin-bottom: 2px;
}
 
.posttb div {
  height: 40px;
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 92%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 200px;
  margin-bottom: 2px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 20px #000 inset;
}
 
.postpic {
  height: 320px;
  width: 200px;
  margin-top: 10px;
  margin-right: 8px;
}
 
.postline {
  height: 40px;
  padding-top: 10px;
  font-size: 40px;
  font-family: 'Italianno';
  text-align: center;
  line-height: 92%;
  color: #fff;
  background-color: #464244;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 430px;
  box-shadow: rgba(33, 24, 17, 0.700) 0px 0px 3px 0px;
  box-shadow: 0px 0px 3px #130E0A, 0px 0px 30px #000 inset;
}
 
.postetbody {
  height: auto;
  padding: 10px;
  line-height: 120%;
  width: 410px;
  text-align: justify
}
 
.keresotabla {
  vertical-align: top;
  padding: 10px;
  padding-right: 5px;
  height: 320px;
}
 
.keresoadat {
  height: 320px;
  overflow: auto;
  padding-right: 5px;
}
 
.keresomese {
  border-top: 1px dotted #2a2a2a;
  text-align: justify;
  padding-top: 10px;
  margin-top: 5px;
}
 
.accbody {
  height: auto;
  padding: 10px;
  margin-left: 5px;
}
 
.acctxt {
  height: auto;
  text-align: justify;
  line-height: 120%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  width: 370px;
  margin-bottom: 2px;
}
 
/*multilista*/
 
.alap2 {
  width: 224px;
  height: 224px;
  border: 5px solid #5A4E3E;
}
 
.kep {
  opacity: 0.0;
  height: 224px;
  width: 224px;
  -webkit-transition: opacity .5s linear;
  -moz-transition: opacity .5s linear;
  -o-transition: opacity .5s linear;
  background: #f7f4ff;
}
 
.kep:hover {
  opacity: .9
}
 
.szoveg {
  font-family: Oxygen;
  font-size: 13px;
  text-align: justify;
  color: #332a29;
  line-height: 100%;
  width: 224px;
  height: 210px;
  overflow: auto;
  margin-top: -10px;
}
 
.also_table_fo {
  width: 175px;
  height: 100px;
  background-color: #928A8D;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0px 0px 2px #000, 0px 0px 20px #000 inset;
  overflow: hidden;
}
 
.also_img_fo {
  position: relative;
  z-index: 2;
  width: 175px;
  height: 100px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}
 
.also_img_fo > img {
  width: 175px;
  height: 100px;
  position: relative;
  z-index: 2;
}
 
.also_img_dsc_fo {
  position: relative;
  z-index: 1;
  width: 163px;
  height: 88px;
  font-family: 'Oswald', cursive;
  margin-top: -100px;
  font-size: 12px;
  padding: 6px;
  text-align: justify;
  overflow: auto;
}
 
.also_img_dsc_fo a {
  font-color: black;
}
 
.also_table_fo:hover .also_img_fo {
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}
 
.left:hover .also_img_fo {
  margin-left: -200px;
}
 
.right:hover .also_img_fo {
  margin-left: 200px;
}
 
 
also_table_sajat {
  width: 440px;
  height: 45px;
  background-color: #928A8D;
  border-radius: 5px;
  padding: 6px;
  margin-left: 7px;
  margin-top: 20px;
  margin-bottom: 5px;
}
 
.also_img_sajat {
  position: relative;
  z-index: 2;
  width: 440px;
  height: 45px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}
 
.also_img_sajat > img {
  width: 440px;
  height: 45px;
  position: relative;
  z-index: 2;
}
 
.also_img_dsc_sajat {
  position: relative;
  z-index: 1;
  width: 430px;
  height: 35px;
  padding: 6px;
  text-align: justify;
  margin-top: -47px;
  overflow: hidden;
  font-size: 11px;
}
 
.also_table_sajat:hover .also_img_sajat {
  margin-left: 452px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1.7s;
  -moz-transition: 1.7s;
  -o-transition: 1.7s;
  -htm-transition: 1.7s;
  -webkit-transition: 1.7s;
}
 
.forumpic_news {
  opacity: 0;
  width: 520px;
  height: 100px;
  transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -webkit-transition-duration: 1.5s;
}
 
.forumpic_news:hover {
  opacity: 0.98;
}
 
.forumpic_text_news {
  width: 520px;
  height:100px;
  background-image:url(http://kephost.com/images/2016/03/01/a0532d.jpg);
  text-align: justify;
  font-size:14px;
  line-height: 170%;
  color: white;
  overflow:auto;
}
 
also_table_elfogadott30 {
  width: 460px;
  height: 30px;
  background-color: #928A8D;
  border-radius: 5px;
  padding: 6px;
  margin-left: 7px;
  margin-top: 20px;
  margin-bottom: 5px;
}
 
.also_img_elfogadott30{
  position: relative;
  z-index: 2;
  width: 460px;
  height: 30px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}
 
.also_img_elfogadott30 > img {
  width: 460px;
  height: 30px;
  position: relative;
  z-index: 2;
}
 
.also_img_dsc_elfogadott30 {
  position: relative;
  z-index: 1;
  width: 454px;
  height: 24px;
  padding: 1px;
  text-align: justify;
  margin-top: -30px;
  overflow: auto;
  overflow-y: auto;
  font-size: 12px;
}
 
.also_table_elfogadott30:hover .also_img_elfogadott30 {
  margin-left: 470px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1.7s;
  -moz-transition: 1.7s;
  -o-transition: 1.7s;
  -htm-transition: 1.7s;
  -webkit-transition: 1.7s;
}
 
/*csoportok*/
 
.grpmain {
  width: 500px;
  height: 270px;
  border: 3px solid #555;
  box-shadow: 6px 6px 6px #8A7171, 6px 6px 6px black;
}
 
.grppic {
  opacity: 0.0;
  height: 270px;
  width: 500px;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  background: #928A8D;
}
 
.grppic:hover {
  opacity: 0.9
}
 
.grptext {
  font-family: Verdana;
  font-size: 11px;
  font-weight: bold;
  text-align: justify;
  color: #DBCDC8;
  line-height: 110%;
  width: 480px;
  height: 250px;
  overflow: auto;
  margin-top: 10px;
  margin-left: 15px;
}
 
.grpmainproba {
  width: 500px;
  height: 270px;
  border: 3px solid #555;
  border-radius: 10px;
  box-shadow: 6px 6px 6px black, 6px 6px 6px black;
}
 
.grppicproba {
  opacity: 0.0;
  height: 270px;
  width: 500px;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  background: #928A8D;
}
 
.grppicproba:hover {
  opacity: 0.8
}
 
.grptextproba {
  font-family: Verdana;
  font-size: 11px;
  font-weight: bold;
  text-align: justify;
  color: white;
  line-height: 1.8;
  padding-left:3px;
  padding-right:3px;
  width: 460px;
  height: 204px;
  overflow: auto;
  margin-top: 34px;
  margin-left: 25px;
}
 
/*hirdetés*/
 
.lvmain {
  width: 573px;
  height: 573px;
  border: 3px solid #555;
  border-radius: 6px;
  box-shadow: 6px 6px 6px black, 6px 6px 6px black;
}
 
 
  .lvpic {
    opacity: 0.0;
    height: 573px;
    width: 573px;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    background: #f7f4ff;
  }
 
  .lvpic {
    opacity: 0.0;
    height: 573px;
    width: 573px;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    background-image: url("http://kephost.com/images/2016/05/12/hirdetes-hatter2a.jpg");
  }
 
  .lvpic:hover {
    opacity: 0.9
  }
 
  .lvtext {
    font-family: Verdana;
    font-size: 11px;
    text-align: justify;
    color: #fff;
    line-height: 110%;
    width: 540px;
    height: 270px;
    overflow: auto;
    margin-top: 15px;
    margin-left: 15px;
    padding-left: 3px;
    padding-right: 3px;
  }
 
  .lvgif {
    width: 260px;
    height: 167px;
    margin-top: 10px;
    margin-left: 16px;
    display: inline-block;
  }
 
  .lvlink {
    width: 260px;
    height: 167px;
    margin-top: 25px;
    margin-left: 95px;
    display: inline-block;
    position: absolute;
    line-height: 180%;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
  }






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Octi October on September 10th 2016, 12:39 pm

Ehh... Nope.

Octi October
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : Still in the galaxy...

http://lasvegas.hungarianforum.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Luffy on September 10th 2016, 12:43 pm

Try adding this code:
Code:
.profil a img:hover {
    -webkit-filter: grayscale(100%);
    -webkit-transition: .5s ease-in-out;
}
.profil a img {
    -webkit-filter: grayscale(0%);
    -webkit-transition: .5s ease-in-out;
}






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Octi October on September 10th 2016, 1:02 pm

Nothing again. Sad

I have found that code and when I add it to the Stylesheet the avatars and the logo (main picture) start to fade.
It is still not what I need but can you edit this code to produce the grayscale effect, and only on the avatars?

Code:
 a:hover{
          opacity:0.65;
          -moz-opacity: 0.65;
          filter: alpha(opacity=65);
          }

Octi October
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : Still in the galaxy...

http://lasvegas.hungarianforum.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Ace 1 on September 11th 2016, 4:59 am

@Luffy the vendor
Code:
-webkit-filter
doesn't work in Firefox, which is what I'm assuming @Octi October is using. This code should work:

Code:
a img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: grayscale(0%);
  transition: .5s ease-in-out;
}
a img:hover {
  filter: grayscale(100%);
  transition: .5s ease-in-out;
}

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by Octi October on September 11th 2016, 7:52 am

Whoa! This code works miracles! The result looks amazing!
Yes, I have Firefox.

The site corrected the code. It looks like this now:
(Maybe someone wants to use it too in the future)

Code:
 a img {
          filter: url("data:image/svg+xml;utf8,#grayscale");
          filter: grayscale(0%);
          transition: .5s ease-in-out;
        }
        a img:hover {
          filter: grayscale(100%);
          transition: .5s ease-in-out;
        }

Many thx Ace 1! Angel
And thank you for your effort, Luffy! Flowers

Octi October
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : Still in the galaxy...

http://lasvegas.hungarianforum.com

Back to top Go down

Solved Re: Avatar grayscale filter on hover

Post by SLGray on September 11th 2016, 7:58 am

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum