Dynamic background with respect to div

Question

Dynamic background with respect to div

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (-1 votes)

2

I am doing an exercise which is necessary to create a website for an advertising agency. I did everything right but I'm having a lot of difficulty with a feature. I want that when passing the mouse on a <article> with an id change the background.

The last stretch of CSS #site:hover ~servicosjs should do this but is not doing it.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Projeção - M</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lateef" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Michroma" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet">

</head>
<body>
    <nav class="links">
        <label for="rd_home">Home</label>
        <label for="rd_servicos">Serviços</label>
        <label for="rd_fale_conosco">Fale Conosco</label>       
    </nav>
    <div class="scroll">
        <input type="radio" name="grupo" id="rd_home" checked="true">
        <input type="radio" name="grupo" id="rd_servicos">
        <input type="radio" name="grupo" id="rd_fale_conosco">
        <div class="sections">
            <div class="bloco" id="homejs">
                <div id="conteiner_home">
                    <div id=conteiner_form1>
                    <H1>Projeção - M</H1>
                    <br>
                    <br>
                    <br>
                    <u><p>Impulsionamos a visibilidade do seu negocio na internet. </p></u>
                    </div>
                </div>
            </div>
            <div class="bloco" id="servicosjs">
                <div id="conteiner_servicos">
                    <article class="item" id="site";>
                        <h3>Sites</h3>
                        <p>Desenvolvemos e otimizamos sites para ser de facil leitura e indexação nos motores de busca. </p>
                        <br>
                        <br>

                    </article>
                    <article class="item" id="mapa">
                        <h3>Mapas</h3>

                        <p>Cadastramos estabelecimentos no google Maps, microsoft Bing mapas e Apple maps connect. </p>
                        <br>
                        <br>

                    </article>
                    <article class="item" id="publicidade">
                        <h3>Publicidade Digital</h3>

                        <p>Divulgamos sites do seu nogocio nos sistemas de buscas Google e Microsoft Bing. </p>

                    </article>
                    <br>
                </div>
            </div>
            <div class="bloco" id="fale_conoscojs">
                <div id=conteiner_fale_conosco>
                    <div id=conteiner_form3>
                        <form name="fomrcontato" action="" method="post">
                            <center><h1>Contato</h1></center>

                            <p class="formulario">
                                 <input type="text" name="nome" placeholder="Seu nome" required="required"> 
                            </p>
                            <p class="formulario">
                                 <input type="text" name="empresa" placeholder="Empresa">
                            </p>
                            <p class="formulario">
                                 <input type="email" name="email" placeholder="Email" required="required">
                            </p>
                            <p class="formulario">
                                 <input type="text" name="telefone" placeholder="Telefone" required="required">
                            </p>
                            <p class="formulario">
                                 <input type="text" name="assunto" placeholder="Qual o motivo do contato ?" required="required">
                            </p>
                            <p class="formulario">
                                 <textarea name="mensagem" placeholder="Deixe sua mensagem "></textarea>
                            </p>
                            <center><p class="enviar">
                                 <input type="submit" name="enviar" value="enviar">
                            </p></center>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <footer class="rodape">
            <p class="copyright">
                Copyright © Projeção - M. Todos os direitos reservados.
            </p>        
        </footer>
    </div>
</body>
</html>

<?php
    $emailEnviar = "[email protected]";
    $nome = $_POST['nome'];
    $empresa = $_POST['empresa'];
    $email = $_POST['email'];
    $telefone = $_POST['telefone'];
    $assunto = $_POST['assunto'];
    $mensagem = $_POST['mensagem'];

    if($_post['enviar'])(

        mail("$emailEnviar","assunto","
            Email enviado pelo site:
            Nome: $nome
            Empresa: $empresa
            email: $email
            telefone: $telefone
            assunto: $assunto
            ---
            mensagem: $mensagem

        ");
    )
?>

CSS:

        *{
        margin: 0;
        padding: 0;
    }

* p{
    font-family: 'Lateef', cursive;
    font-size: 150%;
    display: flex;
}
* h2{
    font-family: 'Berkshire Swash', cursive;
}
* h1{
    font-family: 'Michroma', sans-serif;
}
    .links{
        width: 100vw;
        height: 50px;
        position: fixed;
        display: flex;
        background-color: rgba(0,0,0,.5);
    }
    .links label{
        padding: 10px 0;
        flex-grow: 1;
        cursor: pointer;
        transition: all .4s;
        text-align: center;
        font-family: 'Arial';
        font-size: 100%;
        color: #fff;
    }

    .links label:hover{
        background-color: rgba(255,255,255,.3);
    }

    .links label{
        font-family: 'Cinzel', serif;
        font-size: 150%;
    }

    .rodape {
        color: rgb(255,255,255);
        margin-top: 95vh;
        width: 100vw;
        height: 50px;
        position: fixed;
        display: flex;
        background-color: rgba(0,0,0,.5);
        text-align: center;
    }

    .rodape p{
        margin-left: 40vw;
    }

    .scroll input {
        display: none;
    }

    .bloco{
        width: 100vw;
        height: 100vh;
        display: flex;
    }

    .preço{
        visibility: hidden;
    }


    .scroll{
        display: flex;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .sections{
        transition: all .4s;
    }

    .item{ 
        display: block;
        margin: 20px;
        padding: 10px;
        align-items: center;
        height: 45vh;
        width: 75vw;
        background-color: rgba(192,192,192,.5);
        border-radius: 30px;
    }


    .item h3{
        font-family: 'Bangers', cursive;
        text-align: center;
        font-size: 200%;
    }

    .item p{
        text-align: justify;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }
    .item h2{
        text-align: center;
    }

    .item:hover{
        background-color: rgba(192,192,192,.7);
        transition: all .5s ease-in-out;

    }

    .item:hover  h2 {
        visibility: visible;
        transition: all 1s ease-in-out;
        position: relative;
        display: block;
    }

    .item:hover  h4 {
        visibility: visible;
        transition: all 1s ease-in-out;
        position: relative;
        display:block; ;
    }

    .formulario{
        margin-top: 3vh;
    }

    .formulario input, textarea{
        width: 35vw;
        padding: 1%;
        position: relative;

    }

    .enviar input{
        margin-top: 1%;
        height: 4vh;
        width:  6vw;
    }

    .formulario textarea{
        height: 20vh;
    }

    .sections p{
        text-align: justify;

    }

    #homejs{
        background-color: #7fbd42;
        background-image: url("../imagens/Home_page.png");
        background-size: cover;
        background-repeat: no-repeat;
    }
    #homejs p{
        font-family: 'Calligraffitti', cursive;
        font-size: 200%;

    }
    #servicosjs{
        background-image: url("../imagens/Servicos.png");
        background-size: cover;
        background-repeat: no-repeat;
        align-items: center;
    }
    #precojs{
        background-color: #414950;
    }
    #fale_conoscojs{
        background-color: #aaa;
        background-image:  url("../imagens/Fale_conosco.png");
        background-size: cover;
        background-repeat: no-repeat;

    }

    #fale_conoscojs form input{
        display: block;
    }

    #rd_home:checked ~ .sections{
        margin-top:0vh;
    }

    #rd_servicos:checked ~ .sections{
        margin-top:-100vh;
    }
    #rd_fale_conosco:checked ~ .sections{
        margin-top:-200vh;
    }

    #conteiner_servicos {
        background-color: rgba(169,169,169,.5);
        align-items: center;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    #conteiner_home{
        background-color: rgba(169,169,169,.5);
        width: 100vw;
        height: 100vh;
    }

    #conteiner_fale_conosco{
        background-color: rgba(169,169,169,.5);
        width: 100vw;
        height: 100vh;
    }

    #conteiner_fale_conosco form{
        margin: 0 auto;
        margin-top: 13vh;
    }

    #conteiner_form1{
        width: 180vh;
        height: 90vw;
        margin-top: 40vh;
        margin-left: 35vw;
    }

    #conteiner_form3{
        width: 50vh;
        height: 50vw;
        margin-left:10%;
        position: relative;
    }

    #site:hover ~ #servicosjs{
        background-image: background-image:  url("../imagens/Sites.png");
        background-size: cover;
        background-repeat: no-repeat;
        transition: all 1s ease-in-out;
    }

html css

asked by anonymous 02.06.2018 / 23:50

3 answers

Improving jquery code Variable out of while is zero

score 0 · Answer 1

The ~ selector will select sibling elements. Note that in their structure, the two elements are not siblings:

<div class="bloco" id="servicosjs">  inclusive tem um erro aqui
    <div id="conteiner_servicos">      ↓
        <article class="item" id="site";>

The element #servicosjs is grandfather of #site .

This selector below ...

#site:hover ~ #servicosjs

... you are selecting all siblings (which are in the same div and at the same level) of #site that have id #servicosjs , which is not your case. >

In short, you will not be able to change a parent element from a child element. You will have to use JavaScript for this. Example:

document.getElementById("site").onmouseover = function(){
   this.parentNode.parentNode.style.cssText = 'background-image:  url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");'
   +'background-size: cover;'
   +'background-repeat: no-repeat;'
   +'transition: all 1s ease-in-out;';
}

See:

document.getElementById("site").onmouseover = function(){
   this.parentNode.parentNode.style.cssText = 'background-image:  url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");'
   +'background-size: cover;'
   +'background-repeat: no-repeat;'
   +'transition: all 1s ease-in-out;';
}

*{
        margin: 0;
        padding: 0;
    }

* p{
    font-family: 'Lateef', cursive;
    font-size: 150%;
    display: flex;
}
* h2{
    font-family: 'Berkshire Swash', cursive;
}
* h1{
    font-family: 'Michroma', sans-serif;
}
    .links{
        width: 100vw;
        height: 50px;
        position: fixed;
        display: flex;
        background-color: rgba(0,0,0,.5);
    }
    .links label{
        padding: 10px 0;
        flex-grow: 1;
        cursor: pointer;
        transition: all .4s;
        text-align: center;
        font-family: 'Arial';
        font-size: 100%;
        color: #fff;
    }

    .links label:hover{
        background-color: rgba(255,255,255,.3);
    }

    .links label{
        font-family: 'Cinzel', serif;
        font-size: 150%;
    }

    .rodape {
        color: rgb(255,255,255);
        margin-top: 95vh;
        width: 100vw;
        height: 50px;
        position: fixed;
        display: flex;
        background-color: rgba(0,0,0,.5);
        text-align: center;
    }

    .rodape p{
        margin-left: 40vw;
    }

    .scroll input {
        display: none;
    }

    .bloco{
        width: 100vw;
        height: 100vh;
        display: flex;
    }

    .preço{
        visibility: hidden;
    }


    .scroll{
        display: flex;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .sections{
        transition: all .4s;
    }

    .item{ 
        display: block;
        margin: 20px;
        padding: 10px;
        align-items: center;
        height: 45vh;
        width: 75vw;
        background-color: rgba(192,192,192,.5);
        border-radius: 30px;
    }


    .item h3{
        font-family: 'Bangers', cursive;
        text-align: center;
        font-size: 200%;
    }

    .item p{
        text-align: justify;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }
    .item h2{
        text-align: center;
    }

    .item:hover{
        background-color: rgba(192,192,192,.7);
        transition: all .5s ease-in-out;

    }

    .item:hover  h2 {
        visibility: visible;
        transition: all 1s ease-in-out;
        position: relative;
        display: block;
    }

    .item:hover  h4 {
        visibility: visible;
        transition: all 1s ease-in-out;
        position: relative;
        display:block; ;
    }

    .formulario{
        margin-top: 3vh;
    }

    .formulario input, textarea{
        width: 35vw;
        padding: 1%;
        position: relative;

    }

    .enviar input{
        margin-top: 1%;
        height: 4vh;
        width:  6vw;
    }

    .formulario textarea{
        height: 20vh;
    }

    .sections p{
        text-align: justify;

    }

    #homejs{
        background-color: #7fbd42;
        background-image: url("../imagens/Home_page.png");
        background-size: cover;
        background-repeat: no-repeat;
    }
    #homejs p{
        font-family: 'Calligraffitti', cursive;
        font-size: 200%;

    }
    #servicosjs{
        background-image: url("../imagens/Servicos.png");
        background-size: cover;
        background-repeat: no-repeat;
        align-items: center;
    }
    #precojs{
        background-color: #414950;
    }
    #fale_conoscojs{
        background-color: #aaa;
        background-image:  url("../imagens/Fale_conosco.png");
        background-size: cover;
        background-repeat: no-repeat;

    }

    #fale_conoscojs form input{
        display: block;
    }

    #rd_home:checked ~ .sections{
        margin-top:0vh;
    }

    #rd_servicos:checked ~ .sections{
        margin-top:-100vh;
    }
    #rd_fale_conosco:checked ~ .sections{
        margin-top:-200vh;
    }

    #conteiner_servicos {
        background-color: rgba(169,169,169,.5);
        align-items: center;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    #conteiner_home{
        background-color: rgba(169,169,169,.5);
        width: 100vw;
        height: 100vh;
    }

    #conteiner_fale_conosco{
        background-color: rgba(169,169,169,.5);
        width: 100vw;
        height: 100vh;
    }

    #conteiner_fale_conosco form{
        margin: 0 auto;
        margin-top: 13vh;
    }

    #conteiner_form1{
        width: 180vh;
        height: 90vw;
        margin-top: 40vh;
        margin-left: 35vw;
    }

    #conteiner_form3{
        width: 50vh;
        height: 50vw;
        margin-left:10%;
        position: relative;
    }

    #site:hover ~ #servicosjs{
        background-image: background-image:  url("../imagens/Sites.png");
        background-size: cover;
        background-repeat: no-repeat;
        transition: all 1s ease-in-out;
        background-color: red;
    }

<nav class="links">
     <label for="rd_home">Home</label>
     <label for="rd_servicos">Serviços</label>
     <label for="rd_fale_conosco">Fale Conosco</label>       
 </nav>
 <div class="scroll">
     <input type="radio" name="grupo" id="rd_home" checked="true">
     <input type="radio" name="grupo" id="rd_servicos">
     <input type="radio" name="grupo" id="rd_fale_conosco">
     <div class="sections">
         <div class="bloco" id="homejs">
             <div id="conteiner_home">
                 <div id=conteiner_form1>
                 <H1>Projeção - M</H1>
                 <br>
                 <br>
                 <br>
                 <u><p>Impulsionamos a visibilidade do seu negocio na internet. </p></u>
                 </div>
             </div>
         </div>
         <div class="bloco" id="servicosjs">
             <div id="conteiner_servicos">
                 <article class="item" id="site">
                     <h3>Sites</h3>
                     <p>Desenvolvemos e otimizamos sites para ser de facil leitura e indexação nos motores de busca. </p>
                     <br>
                     <br>

                 </article>
                 <article class="item" id="mapa">
                     <h3>Mapas</h3>

                     <p>Cadastramos estabelecimentos no google Maps, microsoft Bing mapas e Apple maps connect. </p>
                     <br>
                     <br>

                 </article>
                 <article class="item" id="publicidade">
                     <h3>Publicidade Digital</h3>

                     <p>Divulgamos sites do seu nogocio nos sistemas de buscas Google e Microsoft Bing. </p>

                 </article>
                 <br>
             </div>
         </div>
         <div class="bloco" id="fale_conoscojs">
             <div id=conteiner_fale_conosco>
                 <div id=conteiner_form3>
                     <form name="fomrcontato" action="" method="post">
                         <center><h1>Contato</h1></center>

                         <p class="formulario">
                              <input type="text" name="nome" placeholder="Seu nome" required="required"> 
                         </p>
                         <p class="formulario">
                              <input type="text" name="empresa" placeholder="Empresa">
                         </p>
                         <p class="formulario">
                              <input type="email" name="email" placeholder="Email" required="required">
                         </p>
                         <p class="formulario">
                              <input type="text" name="telefone" placeholder="Telefone" required="required">
                         </p>
                         <p class="formulario">
                              <input type="text" name="assunto" placeholder="Qual o motivo do contato ?" required="required">
                         </p>
                         <p class="formulario">
                              <textarea name="mensagem" placeholder="Deixe sua mensagem "></textarea>
                         </p>
                         <center><p class="enviar">
                              <input type="submit" name="enviar" value="enviar">
                         </p></center>
                     </form>
                 </div>
             </div>
         </div>
     </div>
     <footer class="rodape">
         <p class="copyright">
             Copyright © Projeção - M. Todos os direitos reservados.
         </p>        
     </footer>
 </div>

score 0 · Answer 2

Set the background of an element with JS

In each element <article> (or any other element) with event onmouseover call a function "functionXXXX ()" where XXXX can be, for example, value of ID of element article

Example: <article class="item" id="site"; onmouseover="functionSite()">

In JS create a responsible function to place a background image on the desired element

Complete solution

function functionSite() {
document.getElementById("servicosjs").style.backgroundImage = "url('https://i.stack.imgur.com/gtIzm.jpg')";
}

function functionMapa() {
document.getElementById("servicosjs").style.backgroundImage = "url('https://i.stack.imgur.com/hdpER.jpg')";
}

function functionPublicidade() {
document.getElementById("servicosjs").style.backgroundImage = "url('https://i.stack.imgur.com/0ss6C.jpg')";
}

*{
        margin: 0;
        padding: 0;
    }

* p{
    font-family: 'Lateef', cursive;
    font-size: 150%;
    display: flex;
}
* h2{
    font-family: 'Berkshire Swash', cursive;
}
* h1{
    font-family: 'Michroma', sans-serif;
}
    .links{
        width: 100vw;
        height: 50px;
        position: fixed;
        display: flex;
        background-color: rgba(0,0,0,.5);
    }
    .links label{
        padding: 10px 0;
        flex-grow: 1;
        cursor: pointer;
        transition: all .4s;
        text-align: center;
        font-family: 'Arial';
        font-size: 100%;
        color: #fff;
    }

    .links label:hover{
        background-color: rgba(255,255,255,.3);
    }

    .links label{
        font-family: 'Cinzel', serif;
        font-size: 150%;
    }

    .rodape {
        color: rgb(255,255,255);
        margin-top: 95vh;
        width: 100vw;
        height: 50px;
        position: fixed;
        display: flex;
        background-color: rgba(0,0,0,.5);
        text-align: center;
    }

    .rodape p{
        margin-left: 40vw;
    }

    .scroll input {
        display: none;
    }

    .bloco{
        width: 100vw;
        height: 100vh;
        display: flex;
    }

    .preço{
        visibility: hidden;
    }


    .scroll{
        display: flex;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .sections{
        transition: all .4s;
    }

    .item{ 
        display: block;
        margin: 20px;
        padding: 10px;
        align-items: center;
        height: 45vh;
        width: 75vw;
        background-color: rgba(192,192,192,.5);
        border-radius: 30px;
    }


    .item h3{
        font-family: 'Bangers', cursive;
        text-align: center;
        font-size: 200%;
    }

    .item p{
        text-align: justify;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }
    .item h2{
        text-align: center;
    }

    .item:hover{
        background-color: rgba(192,192,192,.7);
        transition: all .5s ease-in-out;

    }

    .item:hover  h2 {
        visibility: visible;
        transition: all 1s ease-in-out;
        position: relative;
        display: block;
    }

    .item:hover  h4 {
        visibility: visible;
        transition: all 1s ease-in-out;
        position: relative;
        display:block; ;
    }

    .formulario{
        margin-top: 3vh;
    }

    .formulario input, textarea{
        width: 35vw;
        padding: 1%;
        position: relative;

    }

    .enviar input{
        margin-top: 1%;
        height: 4vh;
        width:  6vw;
    }

    .formulario textarea{
        height: 20vh;
    }

    .sections p{
        text-align: justify;

    }

    #homejs{
        background-color: #7fbd42;
        background-image: url("../imagens/Home_page.png");
        background-size: cover;
        background-repeat: no-repeat;
    }
    #homejs p{
        font-family: 'Calligraffitti', cursive;
        font-size: 200%;

    }
    #servicosjs{
        background-image: url("../imagens/Servicos.png");
        background-size: cover;
        background-repeat: no-repeat;
        align-items: center;
    }
    #precojs{
        background-color: #414950;
    }
    #fale_conoscojs{
        background-color: #aaa;
        background-image:  url("../imagens/Fale_conosco.png");
        background-size: cover;
        background-repeat: no-repeat;

    }

    #fale_conoscojs form input{
        display: block;
    }

    #rd_home:checked ~ .sections{
        margin-top:0vh;
    }

    #rd_servicos:checked ~ .sections{
        margin-top:-100vh;
    }
    #rd_fale_conosco:checked ~ .sections{
        margin-top:-200vh;
    }

    #conteiner_servicos {
        background-color: rgba(169,169,169,.5);
        align-items: center;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    #conteiner_home{
        background-color: rgba(169,169,169,.5);
        width: 100vw;
        height: 100vh;
    }

    #conteiner_fale_conosco{
        background-color: rgba(169,169,169,.5);
        width: 100vw;
        height: 100vh;
    }

    #conteiner_fale_conosco form{
        margin: 0 auto;
        margin-top: 13vh;
    }

    #conteiner_form1{
        width: 180vh;
        height: 90vw;
        margin-top: 40vh;
        margin-left: 35vw;
    }

    #conteiner_form3{
        width: 50vh;
        height: 50vw;
        margin-left:10%;
        position: relative;
    }

    #site:hover ~ #servicosjs{
        background-image: background-image:  url("../imagens/Sites.png");
        background-size: cover;
        background-repeat: no-repeat;
        transition: all 1s ease-in-out;
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Projeção - M</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lateef" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Michroma" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet">

</head>
<body>
<nav class="links">
    <label for="rd_home">Home</label>
    <label for="rd_servicos">Serviços</label>
    <label for="rd_fale_conosco">Fale Conosco</label>       
</nav>
<div class="scroll">
    <input type="radio" name="grupo" id="rd_home" checked="true">
    <input type="radio" name="grupo" id="rd_servicos">
    <input type="radio" name="grupo" id="rd_fale_conosco">
    <div class="sections">
        <div class="bloco" id="homejs">
            <div id="conteiner_home">
                <div id=conteiner_form1>
                <H1>Projeção - M</H1>
                <br>
                <br>
                <br>
                <u><p>Impulsionamos a visibilidade do seu negocio na internet. </p></u>
                </div>
            </div>
        </div>
        <div class="bloco" id="servicosjs">
            <div id="conteiner_servicos">
                <article class="item" id="site"; onmouseover="functionSite()">
                    <h3>Sites</h3>
                    <p>Desenvolvemos e otimizamos sites para ser de facil leitura e indexação nos motores de busca. </p>
                    <br>
                    <br>

                </article>
                <article class="item" id="mapa" onmouseover="functionMapa()">
                    <h3>Mapas</h3>

                    <p>Cadastramos estabelecimentos no google Maps, microsoft Bing mapas e Apple maps connect. </p>
                    <br>
                    <br>

                </article>
                <article class="item" id="publicidade" onmouseover="functionPublicidade()">
                    <h3>Publicidade Digital</h3>

                    <p>Divulgamos sites do seu nogocio nos sistemas de buscas Google e Microsoft Bing. </p>

                </article>
                <br>
            </div>
        </div>
        <div class="bloco" id="fale_conoscojs">
            <div id=conteiner_fale_conosco>
                <div id=conteiner_form3>
                    <form name="fomrcontato" action="" method="post">
                        <center><h1>Contato</h1></center>

                        <p class="formulario">
                             <input type="text" name="nome" placeholder="Seu nome" required="required"> 
                        </p>
                        <p class="formulario">
                             <input type="text" name="empresa" placeholder="Empresa">
                        </p>
                        <p class="formulario">
                             <input type="email" name="email" placeholder="Email" required="required">
                        </p>
                        <p class="formulario">
                             <input type="text" name="telefone" placeholder="Telefone" required="required">
                        </p>
                        <p class="formulario">
                             <input type="text" name="assunto" placeholder="Qual o motivo do contato ?" required="required">
                        </p>
                        <p class="formulario">
                             <textarea name="mensagem" placeholder="Deixe sua mensagem "></textarea>
                        </p>
                        <center><p class="enviar">
                             <input type="submit" name="enviar" value="enviar">
                        </p></center>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <footer class="rodape">
        <p class="copyright">
            Copyright © Projeção - M. Todos os direitos reservados.
        </p>        
    </footer>
</div>
</body>
</html>

Click "Run" above, under "Services" and mouse over the articles to see the effect

score -1 · Answer 3

in> and change the image.

I created this example, see:

function trocaImagem() {
 var element = document.getElementById("imagem");
 element.classList.remove("plano"); 
  element.classList.add("plano2");
}

.plano {
  height: 800px;
  background-image: url('https://www.shareicon.net/download/2015/09/16/101867_archlinux.svg');
  background-repeat: no-repeat;
}

.plano2 {
  height: 800px;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl_Q58QbMwdCWif4wT6JCdcyu7tKT1DzWYqYuJ93L5m1AonbuwyQ');
  background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div onmouseover="trocaImagem(this)"  id="imagem" class="plano">
    
  </div>
</body>
</html>

Source: link

Pass the mouse on top of the image, then pick up the source code.