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
Chris Tram
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?
I think it will be selecting something making it a variable then adding a class to it that has different style
@123xylem select the image direct container, set it to position relative, create a span set it to position absolute, append the span to the image container, selet the text of the image titile attribute, set the span textContent to that title, on hover set the span display to block or any, on leave set it back to display none