fbpx
Welcome, Guest
Username: Password: Remember me

TOPIC: (SOLVED)Picture hover Code

Picture hover Code 1 year 5 months ago #20271

  • thowal1
  • thowal1's Avatar
  • Offline
  • Junior Member
  • Posts: 36
  • Karma: 0
G'd morning @ all!

Been up since 03:00 this night.

Been googleing for two hours now, installed, deinstalled, reinstalled backups ... but nothing works.

Can anyone tell me a HTML-Code working for this template in joomla 3.9.15 ...

for an image change on mouseover ... ??

IMG0001.XXX = greyclase
IMG0002.XXX = full color

Standard = IMG0001.XXX
On ouseover : IMG0001.XXX -> IMG0002.XXX
On mouse left: IMG0002.XXX -> IMG0001.XXX

All related to the article-layer. (not sections, rows, modules etc.) Just articles ...

Greetngs,

Thorsten
The administrator has disabled public write access.

Picture hover Code 1 year 5 months ago #20276

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4448
  • Thank you received: 642
  • Karma: 116
Hi Thorsten,

Should be pretty simple. Add a class to your image greyscale

and then add the below css to your website:
.greyscale:hover {
               -webkit-filter: grayscale(1); 
                filter: grayscale(1); 
}

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
Last Edit: 1 year 5 months ago by admin.
The administrator has disabled public write access.
The following user(s) said Thank You: thowal1

Picture hover Code 1 year 5 months ago #20305

  • thowal1
  • thowal1's Avatar
  • Offline
  • Junior Member
  • Posts: 36
  • Karma: 0
Hello Chetan!

your code worked perfectly well. Thanks - by the way - for your consequent and high level functioning answers to my stupid questions.

Now ... the code ...
.greyscale:hover {
               -webkit-filter: grayscale(1); 
                filter: grayscale(1); 
}

... makes a full-color picture displayed in greyscale on mouseover. The questions for me, that are folliwing:

1.) Can you tell me the reverse-code as well? (displaying a colored picture displayed greyscale first ... and only on mouseover turn in to original colors?)

2.) the code contains "webfilters" ... are they defined somewhere? greyscale = greyscale. 32-bit = "?" black and thite = "?" etc.

3.) I have installed a plugin displaying actual date and time. I published the module to position footer-1. It was working well. But since I published the module to header section "block one" as well, the module, wich is the same in both places, in original footer-1 only displayes date. Date and time are but fully shown in heser-section, block one.

Footer-Section including footer-1:


Header-Section including Block-1:


Now ... I could use custom colors to change text-color from black to blue on footer-1. That works ... but not with block one as well ... or at the same time. So ... Can you tell me a custom css code to get block-1 in the header section take over all the settings of main menu? (color, font size, behavior)

You will have noticed, that block one is black instead of blue and has X px more one font size.

Can you help me again, please?

Greetings,

Thorsten
Last Edit: 1 year 5 months ago by thowal1.
The administrator has disabled public write access.

Picture hover Code 1 year 5 months ago #20306

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4448
  • Thank you received: 642
  • Karma: 116
Hi Thorsten,
It's alright.
Change your css to:
.greyscale {
               -webkit-filter: grayscale(1); 
                filter: grayscale(1); 
}
.greyscale:hover {
               -webkit-filter: grayscale(0); 
                filter: grayscale(0); 
}

Read more about it here: www.w3schools.com/cssref/css3_pr_filter.asp

Please start a new topic for #3 to avoid confusion with the existing question.
Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.
The following user(s) said Thank You: thowal1

Picture hover Code 1 year 5 months ago #20307

  • thowal1
  • thowal1's Avatar
  • Offline
  • Junior Member
  • Posts: 36
  • Karma: 0
WOW! That was fast.

So I guess (1) means "ON" and (0) means off. If I wanted tu use both kinds of codes ... Could I change / rename from

.greyscale { ... to ... .colored {

and

.greyscale:hover to colored:hover

Love,

T.
The administrator has disabled public write access.

Picture hover Code 1 year 5 months ago #20309

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4448
  • Thank you received: 642
  • Karma: 116
Sure, rename to whatever you like. Please go through the following link: www.w3schools.com/cssref/css3_pr_filter.asp

It explains everything regarding the CSS property.
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.
The following user(s) said Thank You: thowal1

Picture hover Code 1 year 5 months ago #20310

  • thowal1
  • thowal1's Avatar
  • Offline
  • Junior Member
  • Posts: 36
  • Karma: 0
OH MAY GOD!!

It's working ...

Love

T.
The administrator has disabled public write access.

Picture hover Code 1 year 5 months ago #20332

  • nishtha
  • nishtha's Avatar
  • Offline
  • Moderator
  • Posts: 2438
  • Thank you received: 218
  • Karma: 36
Hi,

Perfect Topic Solved then!

Thanks,
Nishtha
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.439 seconds