Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Muna Mohamed
so I thought using js might be easier to do this with @sorinr
Chris Tram
@mooneyd12 Not sure why you cannot directly set the transform attribute; also, the method is getElementById, singular.
Can you have the function use the loop, but change the classes?
Chris Cullen

Hi - I have this image gallery that I want to show the title of when hovered over. Any idea how to select the title attribute on hover?

#envira_shortcode_id_444 > a:hover {
    transition:all 0.3s ease-in;

#envira_shortcode_id_444 > a:hover a[title]{
    top: 50%;
left: 50%;


Thats how im trying to select it which seems to work for most of it but not for the title attribute

The developer tools shows this for the title attribute::

<img id="envira-gallery-image-445" class="envira-gallery-image envira-gallery-image-1" data-envira-index="1" src="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" data-envira-src="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" data-envira-gallery-id="444" data-envira-item-id="445" data-envira-caption="Web Development" alt="HTML5, CSS3,  JavaScript,  WordPress,  NodeJS, Express  MongoDB,  Site Authentication,  Git GitHub" title="Web Development" itemprop="thumbnailUrl" data-envira-srcset="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg 400w,https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg 2x" srcset="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" style="opacity: 1;">

the site is www.webdevchris.ga
Thanks Guys!

its the envira gallery with 3 images at the top
Chris Tram
@123xylem You want to change the styling of the tooltip that appears based on the title attribute? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
e.g. <a title="i pop up for the link">I am a link</a>
Muna Mohamed
I have tried doing that but still no luck @ctram
someone suggested using css instead so I'm playing around with css animations atm @ctram
Chris Cullen
@ctram hi
when i hover on the image i want the title to appear
@ctram so im trying to target the images title attribute
and show it on hover
@123xylem easiest using javascript I guess, but maybe because I'm not really good with css
@123xylem but if all those data attributes are rendered with a templating engine, put the title in the center of the image with display: none, and on hover set it to display block
@123xylem kinda of a barbaian css but it should work
Chris Cullen
@AdelMahjoub its wordpress so its not so customisable
@123xylem not even an inline script ?
Chris Cullen
well i have a additional css area to add css
can i add a script to that?
@123xylem if you can read the php file, you could easily add a script under the images section
Chris Cullen
Im customising a plugin
@123xylem open the php file and add a script tag and the logic inside a function like this, so nothing unexpected should happen
/* script */
Chris Cullen
@AdelMahjoub its a bit above me
its a plugin so I dont have access to the php files
@123xylem simple, all inline javascript is parsed while the browser is building the dom, you edit that php page and add <script></script> just under the images section
@123xylem and wrap the javascript that you'll write inside a function like above
Chris Cullen
@AdelMahjoub I could add custom html
and add the images in it maybe
instead of the envira plugin
@123xylem if you can add custom html, then you can add inline scripts
@123xylem this is an inline script
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">


  <!-- this is an inline script tag -->
    /* javascript code */

@123xylem it will be parsed by the browser when it parses the html to build the dom
@123xylem and it will be executed
Chris Cullen
@AdelMahjoub thanks but even the custom html wont work for some reason.. Wont let me type in it
123xylem sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 641 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
Chris Cullen
I think I just need a way to select the title attribute with a hover
@123xylem I don't know much about wordpress, but I guess that the templating is similar than any php app, you open the wp_content folder, you find the file in which the image gallery is written, and you edit it. Unless you don't have access to the files
Chris Cullen
@AdelMahjoub k going into the dark backend
@AdelMahjoub i havent used jquery in ages
what kind of code will i use?
@123xylem use javascript if you don't feel using jquery
Chris Cullen
getelementby id (title attribute) ?
@123xylem yes, if you struggle open the dev tools and console.log anything you doubt
Chris Cullen
. title on(hover) .addclass (show)
o boyt
@123xylem :smile: use javascript, your text editor will do the rest if it have javascript code completition
Chris Cullen
could u give me a rough sample of what i have to do?