---
url: 'https://metadrop.net/es/articulos/anadir-una-capa-overlay-a-un-contendor-utilizando-jquery'
title: 'Añadir una capa overlay a un contendor utilizando jquery'
author: 'Agustin Gómez'
date: '2017-01-17T10:16:03+00:00'
updated: '2026-06-10T06:57:37+00:00'
type: article
summary: 'Como ejemplo vamos a coger una imagen y a mostrar un texto encima de la imagen.'
tags:
  - JavaScript
  - jQuery
  - Front-end
published: true
og:
  determiner: Automatic
  site_name: Metadrop
  'image:alt': 'Añadir una capa overlay a un contendor utilizando jquery'
  street_address: 'Calle Manuel Luna, 12, 3 Dcha'
  locality: Madrid
  region: Madrid
  postal_code: '28020'
  country_name: España
  email: hola@metadrop.net
  phone_number: '910053180'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      '@type': Article
      '@id': 'https://metadrop.net/es/articulos/anadir-una-capa-overlay-a-un-contendor-utilizando-jquery#article'
      name: 'Añadir una capa overlay a un contendor utilizando jquery'
      headline: 'Añadir una capa overlay a un contendor utilizando jquery'
      description: 'Como ejemplo vamos a coger una imagen y a mostrar un texto encima de la imagen.'
      about:
        - JavaScript
        - jQuery
        - Front-end
      datePublished: '2012-06-28T12:00:00+0200'
      dateModified: '2026-06-10T08:57:37+0200'
      author:
        '@type': Person
        name: 'Agustin Gómez'
      publisher:
        '@type': Organization
        '@id': 'https://metadrop.net/#organization'
      mainEntityOfPage: 'https://metadrop.net/es/articulos/anadir-una-capa-overlay-a-un-contendor-utilizando-jquery'
    -
      '@type': Organization
      '@id': 'https://metadrop.net/#organization'
      url: 'https://metadrop.net/'
      name: Metadrop
      sameAs:
        - 'https://www.drupal.org/metadrop'
        - 'https://twitter.com/metadrop'
        - 'https://asociaciondrupal.es/partner/metadrop'
        - 'https://www.linkedin.com/company/metadrop'
      logo:
        '@type': ImageObject
        url: 'https://metadrop.net/themes/custom/mdrop_radix/logo-metadrop-500-500.jpg'
        width: '500'
        height: '500'
    -
      '@type': ItemPage
      '@id': 'https://metadrop.net/es/articulos/anadir-una-capa-overlay-a-un-contendor-utilizando-jquery'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://metadrop.net/es'
          -
            '@type': ListItem
            position: 2
            name: 'Artículos expertos sobre Drupal y tecnología'
            item: 'https://metadrop.net/es/articulos'
      publisher:
        '@type': Organization
        '@id': 'https://metadrop.net/#organization'
---
 1. [Artículos](https://metadrop.net/es/articulos)
 
  

# Añadir una capa overlay a un contendor utilizando jquery

Jueves 28 de Junio de 2012

 

 



Como ejemplo vamos a coger una imagen y a mostrar un texto encima de la imagen.



   



Vamos a usar jQuery para este propósito.

```javascript
img_overlayed.hover(function() {
if (!text_overlay.hasClass('animated')) {
text_overlay.dequeue().stop().slideDown(300);
}
}, function() {
text_overlay.addClass('animated').slideUp(300, function() {
text_overlay.removeClass('animated').dequeue();
})
}
);
```



[JavaScript](https://metadrop.net/es/articulos?text=JavaScript)

[jQuery](https://metadrop.net/es/articulos?text=jQuery)

[Front-end](https://metadrop.net/es/articulos?text=Front-end)